import { type ReactNode } from "react";

export function Chip({
  selected,
  onClick,
  children,
  disabled,
}: {
  selected: boolean;
  onClick: () => void;
  children: ReactNode;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled && !selected}
      className={`rounded-full border px-4 py-2.5 text-sm transition-all disabled:cursor-not-allowed disabled:opacity-40 ${
        selected
          ? "border-clay bg-clay text-clay-foreground shadow-soft"
          : "border-border bg-card text-foreground hover:border-clay/50 hover:bg-secondary"
      }`}
    >
      {children}
    </button>
  );
}