'use client';
import { FunctionComponent } from 'react';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AppIcon from '@/components/common/AppIcon';

export interface RelationOption {
  /** Stable code (`parent`/`spouse`/`child`/`self`). */
  code: string;
  /** Translated label. */
  label: string;
  /** Optional AppIcon name for the card. */
  icon?: string;
}

export interface RelationSelectProps {
  options: RelationOption[];
  value: string | null;
  onChange: (value: string) => void;
}

/**
 * Single-select relation picker rendered as radio cards (A3 "who is care for?"). The relation
 * is a stable enum code carried into the patient; labels are translated by the caller.
 * @component RelationSelect
 */
const RelationSelect: FunctionComponent<RelationSelectProps> = ({ options, value, onChange }) => (
  <Stack role="radiogroup" sx={{ gap: 1.5 }}>
    {options.map((option) => {
      const selected = value === option.code;
      return (
        <Paper
          key={option.code}
          role="radio"
          aria-checked={selected}
          tabIndex={0}
          data-code={option.code}
          elevation={0}
          onClick={() => onChange(option.code)}
          onKeyDown={(event) => {
            if (event.key === 'Enter' || event.key === ' ') {
              event.preventDefault();
              onChange(option.code);
            }
          }}
          sx={{
            p: 2,
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: 2,
            border: '2px solid',
            borderColor: selected ? 'primary.main' : 'divider',
            borderRadius: 2,
          }}
        >
          {option.icon ? <AppIcon icon={option.icon} size={26} color="var(--bal-primary)" /> : null}
          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
            {option.label}
          </Typography>
        </Paper>
      );
    })}
  </Stack>
);

export default RelationSelect;
