import React from 'react';
import MuiChip from '@mui/material/Chip';
import type { ChipProps as MuiChipProps } from '@mui/material/Chip';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Props for the FA Chip component */
export interface ChipProps extends MuiChipProps {
  /** Whether the chip is in a selected/active state */
  selected?: boolean;
}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Interactive tag for the FA design system.
 *
 * Pill-shaped chip for filtering, selection, and dismissible labels.
 * Used in ServiceOption (service tags), search filters, arrangement forms,
 * and anywhere users interact with categorised content.
 *
 * Unlike Badge (display-only), Chip is interactive — it can be clicked
 * (for toggling/selection) or deleted (for dismissing/removing).
 *
 * Variant mapping:
 * - `filled` (default) — soft tonal background, like Button's soft variant
 * - `outlined` — border-only, lighter visual weight
 *
 * Colour options:
 * - `default` — neutral grey (general tags, filters)
 * - `primary` — warm brand (selected states, category tags)
 *
 * Interactive modes:
 * - **Clickable** — pass `onClick` or set `clickable` for toggle/filter chips
 * - **Deletable** — pass `onDelete` for dismissible tags
 * - **Both** — clickable + deletable for full interactive chips
 * - **Static** — no onClick/onDelete for display-only tags (prefer Badge for pure status)
 *
 * Selected state:
 * - `selected` prop applies brand styling (filled primary bg or outlined primary border)
 *
 * **Accessibility**: If a Chip has no visible label text (icon-only) and is
 * deletable, provide an `aria-label` so screen readers can announce what
 * is being removed.
 */
export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
  ({ selected = false, variant = 'filled', color, sx, ...props }, ref) => {
    // When selected, promote to primary colour unless explicitly set
    const resolvedColor = color ?? (selected ? 'primary' : 'default');

    return (
      <MuiChip
        ref={ref}
        variant={variant}
        color={resolvedColor}
        sx={[
          selected &&
            variant === 'outlined' && {
              borderWidth: 2,
              borderColor: 'var(--fa-color-brand-500)',
              backgroundColor: 'var(--fa-color-brand-50)',
            },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
        {...props}
      />
    );
  },
);

Chip.displayName = 'Chip';
export default Chip;
