import { Search, SlidersHorizontal, Calendar, Download } from "lucide-react"
import { cn } from "@/lib/utils"
import i18n from "@/lib/i18n";

type Props = {
  searchPlaceholder?: string
  searchValue?: string
  onSearchChange?: (val: string) => void
  filters?: { label: string; value?: string }[]
  customFilters?: React.ReactNode
  showDate?: boolean
  showFilterIcon?: boolean
  showExport?: boolean
  right?: React.ReactNode
  className?: string
}

export function FilterToolbar({
  searchPlaceholder = i18n.t('components.ui.filter-toolbar.text_1'),
  searchValue,
  onSearchChange,
  filters = [],
  customFilters,
  showDate = true,
  showFilterIcon = true,
  showExport = true,
  right,
  className,
}: Props) {
  return (
    <div
      className={cn(
        "flex flex-wrap items-center gap-2 rounded-xl border border-border bg-card p-3",
        className,
      )}
    >
      <div className="relative flex-1 min-w-[220px]">
        <Search className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
        <input
          type="search"
          value={searchValue}
          onChange={(e) => onSearchChange?.(e.target.value)}
          placeholder={searchPlaceholder}
          className="w-full h-9 pr-9 pl-3 rounded-md border border-border bg-muted/40 text-[12.5px] placeholder:text-muted-foreground focus:bg-card focus:outline-none focus:border-gold-400 transition"
        />
      </div>
      {customFilters}
      {filters.map((f) => (
        <button
          key={f.label}
          className="h-9 px-3 rounded-md border border-border bg-card text-[12.5px] font-medium text-foreground hover:bg-muted transition inline-flex items-center gap-1.5"
        >
          <span className="text-muted-foreground">{f.label}:</span>
          <span>{f.value ?? i18n.t('components.ui.filter-toolbar.text_2')}</span>
        </button>
      ))}
      {showDate && (
        <button className="h-9 px-3 rounded-md border border-border bg-card text-[12.5px] font-medium text-foreground hover:bg-muted transition inline-flex items-center gap-1.5">
          <Calendar className="h-3.5 w-3.5 text-muted-foreground" />
          {i18n.t('components.ui.filter-toolbar.text_3')}</button>
      )}
      {showFilterIcon && (
        <button className="h-9 w-9 rounded-md border border-border bg-card text-muted-foreground hover:bg-muted transition inline-flex items-center justify-center">
          <SlidersHorizontal className="h-4 w-4" />
        </button>
      )}
      {showExport && (
        <button className="h-9 px-3 rounded-md border border-border bg-card text-[12.5px] font-medium text-foreground hover:bg-muted transition inline-flex items-center gap-1.5">
          <Download className="h-3.5 w-3.5" />
          {i18n.t('components.ui.filter-toolbar.text_4')}</button>
      )}
      {right}
    </div>
  )
}
