"use client";

import { SlidersHorizontal, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { useLocale } from "@/components/providers/locale-provider";
import { Button } from "@/components/ui/button";

export function FilterToolbar({
  children,
  chips,
  onClear,
  className,
}: {
  children: React.ReactNode;
  chips?: { key: string; value: string }[];
  onClear?: () => void;
  className?: string;
}) {
  const { locale, t } = useLocale();

  return (
    <div
      className={cn(
        "surface-elevated sticky top-[calc(var(--topbar-height)+0.5rem)] z-20 p-4",
        className
      )}
    >
      <div className="mb-3 flex items-center gap-2 text-sm font-medium text-muted-foreground">
        <SlidersHorizontal className="h-4 w-4 text-primary" />
        <span>{locale === "ar" ? "تصفية" : "Filters"}</span>
      </div>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {children}
      </div>
      {chips && chips.length > 0 ? (
        <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-border pt-4">
          {chips.map((chip) => (
            <span
              key={`${chip.key}-${chip.value}`}
              className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary"
            >
              <span className="text-muted-foreground">{chip.key}:</span>
              {chip.value}
            </span>
          ))}
          {onClear ? (
            <Button type="button" variant="ghost" size="sm" onClick={onClear} className="h-7 gap-1">
              <X className="h-3 w-3" />
              {t.clearFilters}
            </Button>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}