"use client";

import { cn } from "@/lib/utils/cn";

interface FilterPillProps {
  label: string;
  active?: boolean;
  onClick?: () => void;
}

export function FilterPill({ label, active, onClick }: FilterPillProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "rounded-full border px-[13px] py-[7px] text-[12.5px] font-semibold transition-colors",
        active
          ? "border-navy bg-navy text-white"
          : "border-border bg-white text-muted hover:border-navy/30"
      )}
    >
      {label}
    </button>
  );
}

interface FilterBarProps {
  children: React.ReactNode;
  className?: string;
}

export function FilterBar({ children, className }: FilterBarProps) {
  return (
    <div className={cn("mb-[18px] flex flex-wrap items-center justify-between gap-3", className)}>
      {children}
    </div>
  );
}