"use client"

import { Search, SlidersHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

interface MailSearchBarProps {
  className?: string
  /** Split-pane column: balanced icon inset inside the pill. */
  compact?: boolean
}

export function MailSearchBar({ className, compact = false }: MailSearchBarProps) {
  return (
    <div className={cn("relative flex w-full min-w-0 items-center", className)}>
      <div
        className={cn(
          "pointer-events-none absolute flex items-center text-gray-500",
          compact ? "left-4" : "left-3.5"
        )}
      >
        <Search className="size-5 shrink-0" />
      </div>
      <Input
        type="text"
        placeholder="Rechercher dans les messages"
        className={cn(
          "h-12 w-full rounded-full border-0 bg-muted text-sm focus-visible:bg-mail-surface focus-visible:ring-1 focus-visible:ring-ring",
          compact ? "pl-11 pr-11" : "pl-11 pr-12"
        )}
      />
      <Button
        variant="ghost"
        size="icon"
        className={cn("absolute text-gray-600", compact ? "right-3" : "right-2")}
        aria-label="Filtres de recherche"
      >
        <SlidersHorizontal className="h-5 w-5" />
      </Button>
    </div>
  )
}