"use client";

import * as React from "react";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
  selected?: boolean;
  onRemove?: () => void;
}

/** A dismissible or selectable filter tag — used in search/filter contexts (Sprint 2 §16). */
export function Chip({ selected, onRemove, className, children, ...props }: ChipProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-body-sm transition-colors duration-150",
        selected
          ? "border-primary bg-primary/10 text-primary-strong"
          : "border-line text-ink-soft hover:border-primary/50",
        className
      )}
      {...props}
    >
      {children}
      {onRemove && (
        <button
          type="button"
          onClick={onRemove}
          aria-label="Remove filter"
          className="rounded-full p-0.5 hover:bg-ink/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
        >
          <X className="size-3" aria-hidden="true" />
        </button>
      )}
    </span>
  );
}