./knowledge-base/frontend/src/components/EraSelector.tsx

/**
 * EraSelector - 時代選択コンポーネント（シンプル版）
 *
 * 9つの固定時代ラベルからチェックボックスで複数選択する。
 *
 * Props:
 * - value: 選択済みラベル配列（controlled）
 * - onChange: 変更時コールバック
 * - disabled: true のときグレーダウンして操作不可（自動設定モード等）
 */
import { Box, FormControlLabel, Checkbox, Typography } from "@mui/material";
import { ERA_LABELS } from "../utils/eraUtils";

interface EraSelectorProps {
  value: string[];
  onChange: (labels: string[]) => void;
  disabled?: boolean;
}

export function EraSelector({
  value,
  onChange,
  disabled = false,
}: EraSelectorProps) {
  const handleChange = (label: string, checked: boolean) => {
    if (checked) {
      onChange([...value, label]);
    } else {
      onChange(value.filter((l) => l !== label));
    }
  };

  return (
    <Box
      sx={{
        opacity: disabled ? 0.45 : 1,
        pointerEvents: disabled ? "none" : "auto",
        transition: "opacity 0.2s",
        display: "flex",
        flexWrap: "wrap",
        gap: 0,
      }}
    >
      {ERA_LABELS.map((label) => (
        <FormControlLabel
          key={label}
          control={
            <Checkbox
              size="small"
              checked={value.includes(label)}
              onChange={(e) => handleChange(label, e.target.checked)}
            />
          }
          label={<Typography variant="body2">{label}</Typography>}
          sx={{ width: "50%", m: 0 }}
        />
      ))}
    </Box>
  );
}