'use client';
import { FunctionComponent } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';

export interface ReviewTagSelectorProps {
  /** The stable tag codes to offer (the review vocabulary). */
  codes: readonly string[];
  /** Currently-selected codes. */
  selected: string[];
  /** Called with the next selection when a chip is toggled. */
  onChange: (selected: string[]) => void;
  /** Maps a code → its display label (the caller owns i18n; labels are keys off the code, never the wire). */
  labelFor: (code: string) => string;
  disabled?: boolean;
}

/**
 * A multi-select chip group for the review tags (منظم/حرفه‌ای/…). Selected chips use the brand primary
 * (MUI palette — no hard-coded hex); unselected are outlined. The component is i18n-free: the caller supplies
 * `labelFor(code)`, keeping chip labels keyed off the stable code and never off the wire.
 * @component ReviewTagSelector
 */
const ReviewTagSelector: FunctionComponent<ReviewTagSelectorProps> = ({
  codes,
  selected,
  onChange,
  labelFor,
  disabled = false,
}) => {
  const toggle = (code: string) => {
    onChange(selected.includes(code) ? selected.filter((c) => c !== code) : [...selected, code]);
  };

  return (
    <Box role="group" sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
      {codes.map((code) => {
        const isSelected = selected.includes(code);
        return (
          <Chip
            key={code}
            label={labelFor(code)}
            color={isSelected ? 'primary' : 'default'}
            variant={isSelected ? 'filled' : 'outlined'}
            clickable={!disabled}
            disabled={disabled}
            onClick={disabled ? undefined : () => toggle(code)}
            aria-pressed={isSelected}
            data-selected={isSelected ? 'true' : 'false'}
            sx={{ fontWeight: isSelected ? 600 : 400 }}
          />
        );
      })}
    </Box>
  );
};

export default ReviewTagSelector;
