// Chip — WealthX DS (built on Badge)
//
// Badge extended with an optional dismiss button.
// Passes all Badge props (variant, className, etc.) through unchanged.
//
// Usage:
//   <Chip>Label</Chip>
//   <Chip onRemove={() => handleRemove(id)}>Label</Chip>
//   <Chip variant="outline" disabled onRemove={...}>Label</Chip>
import { type ReactElement } from "react";
import * as React from "react";
import { X } from "lucide-react";
import { Button } from "./button";
import type { VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import { badgeVariants } from "@/components/ui/badge";

export interface ChipProps
  extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {
  /** When provided, renders a dismiss (×) button inside the chip. */
  onRemove?: () => void;
  disabled?: boolean;
}

function Chip({
  className,
  variant = "secondary",
  onRemove,
  disabled,
  children,
  ...props
}: ChipProps): ReactElement {
  return (
    <span
      aria-disabled={disabled}
      className={cn(
        badgeVariants({ variant }),
        // extra right padding only when dismiss button is present
        onRemove && "pr-1",
        disabled && "pointer-events-none opacity-50",
        className,
      )}
      data-slot="chip"
      data-variant={variant}
      {...props}
    >
      {children}
      {onRemove ? (
        <Button
          type="button"
          variant="ghost"
          size="icon"
          aria-label="Remove"
          className="ml-0.5 size-4 shrink-0 rounded-full p-0.5 opacity-60 hover:opacity-100 disabled:pointer-events-none"
          data-slot="chip-remove"
          disabled={disabled}
          onClick={(e) => {
            e.stopPropagation();
            onRemove();
          }}
        >
          <X className="size-3" />
        </Button>
      ) : null}
    </span>
  );
}

export { Chip };