import { clsx } from "clsx";

type Props = {
  children: React.ReactNode;
  className?: string;
  /** Right-aligned actions (e.g., New button, export). */
  actions?: React.ReactNode;
};

export function Toolbar({ children, className, actions }: Props) {
  return (
    <div
      className={clsx(
        "flex flex-wrap items-center gap-3 rounded-xl border border-[var(--color-line)] bg-white px-4 py-3",
        className,
      )}
    >
      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
        {children}
      </div>
      {actions && (
        <div className="flex flex-wrap items-center gap-2">{actions}</div>
      )}
    </div>
  );
}

const pillBase =
  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[12px] font-semibold transition-colors";

type FilterPillProps = {
  href: string;
  label: string;
  count?: number;
  active?: boolean;
};

export function FilterPill({ href, label, count, active }: FilterPillProps) {
  return (
    <a
      href={href}
      className={clsx(
        pillBase,
        active
          ? "bg-[var(--color-blue)] text-white"
          : "bg-[var(--color-line)]/50 text-[var(--color-ink)] hover:bg-[var(--color-mist)] hover:text-[var(--color-blue)]",
      )}
    >
      {label}
      {count !== undefined && (
        <span
          className={clsx(
            "rounded-full px-1.5 py-0.5 text-[10px] font-bold",
            active
              ? "bg-white/20 text-white"
              : "bg-white text-[var(--color-slate)]",
          )}
        >
          {count}
        </span>
      )}
    </a>
  );
}

type SearchInputProps = {
  name?: string;
  defaultValue?: string;
  placeholder?: string;
  ariaLabel?: string;
  className?: string;
};

export function SearchInput({
  name = "q",
  defaultValue,
  placeholder = "Search…",
  ariaLabel = "Search",
  className,
}: SearchInputProps) {
  return (
    <input
      type="search"
      name={name}
      defaultValue={defaultValue}
      placeholder={placeholder}
      aria-label={ariaLabel}
      className={clsx(
        "w-full min-w-[180px] max-w-[320px] rounded-md border border-[var(--color-line)] bg-white px-3 py-1.5 text-[14px] text-[var(--color-ink)] placeholder:text-[var(--color-slate)]/70 focus:border-[var(--color-blue)] focus:outline-none focus:ring-2 focus:ring-[var(--color-mist)]",
        className,
      )}
    />
  );
}
