"use client";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Filter } from "lucide-react";
import { useTranslations } from "next-intl";

export type FilterStatus = "published" | "disabled" | "scheduled" | "draft";

interface FilterButtonProps {
  className?: string;
  isActive?: boolean;
  onClick?: () => void;
}

export function FilterButton({
  className,
  isActive = false,
  onClick,
}: FilterButtonProps) {
  const tCommon = useTranslations("common");

  return (
    <Button
      onClick={onClick}
      variant="outline"
      className={cn(
        "h-12 px-4 gap-2 rounded-[12px] border-border bg-white hover:bg-primary-50 hover:border-primary-100 font-sans font-bold text-sm text-foreground",
        isActive && "bg-primary-50 border-primary-100",
        className
      )}
    >
      <span>{tCommon("filter")}</span>
      <Filter className="size-5" />
    </Button>
  );
}