"use client";

import { Button } from "@/components/ui/button";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Eye, EyeOff, X } from "lucide-react";

interface FilterToggleProps {
  filter: {
    statusFilter: string;
  };
  setFilter: (filter: { statusFilter: string }) => void;
  activeFiltersCount: number;
  clearFilters: () => void;
}

export function ImprovedToggleFilter({
  filter,
  setFilter,
  activeFiltersCount,
  clearFilters,
}: FilterToggleProps) {
  return (
    <div className="flex items-center gap-3">
      <ToggleGroup
        size="sm"
        type="single"
        value={filter.statusFilter || ""} // nếu rỗng thì ToggleGroup sẽ clear
        onValueChange={(val) => setFilter({ statusFilter: val || "" })} // val null => reset filter
        className="flex items-center gap-1 p-1 bg-muted rounded-lg"
      >
        <ToggleGroupItem
          size={"sm"}
          value="listed"
          aria-label="Hiển thị công khai"
          className="flex items-center gap-2 px-3 py-2 rounded-md data-[state=on]:bg-green-100 data-[state=on]:text-green-700 data-[state=on]:border-green-200 hover:bg-green-50 transition-colors"
        >
          <Eye className="h-2 w-2" />
          <span className="text-sm font-medium">Listed</span>
        </ToggleGroupItem>

        <ToggleGroupItem
          size={"sm"}
          value="unlisted"
          aria-label="Ẩn khỏi danh sách"
          className="flex items-center gap-2 px-3 py-2 rounded-md data-[state=on]:bg-orange-100 data-[state=on]:text-orange-700 data-[state=on]:border-orange-200 hover:bg-orange-50 transition-colors"
        >
          <EyeOff className="h-2 w-2" />
          <span className="text-sm font-medium">Unlisted</span>
        </ToggleGroupItem>
      </ToggleGroup>

      {activeFiltersCount > 0 && (
        <Button
          variant="outline"
          size="sm"
          onClick={clearFilters}
          className="flex items-center gap-2 text-muted-foreground hover:text-foreground bg-transparent"
          aria-label="clear"
        >
          <X className="h-2 w-2" />
          <span className="text-sm">Clear</span>
        </Button>
      )}
    </div>
  );
}
