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

import { Box, Card, CardActionArea, Grid, Typography } from "@mui/material";

export const DOCUMENT_GENRE_OPTIONS: { value: string; image: string | null }[] =
  [
    { value: "写真集", image: "/img/photobook.png" },
    { value: "ノンフィクション小説", image: "/img/shousetu.jpeg" },
    { value: "辞書", image: "/img/jisho.png" },
    { value: "年表", image: "/img/makimono.png" },
    { value: "メール・議事録", image: "/img/mail.jpeg" },
    { value: "取材メモ", image: "/img/shuzaimemo.jpeg" },
    { value: "その他", image: null },
  ];

interface Props {
  value: string;
  onChange: (value: string) => void;
}

export function DocumentGenreSelector({ value, onChange }: Props) {
  return (
    <Box>
      <Grid container spacing={1.5}>
        {DOCUMENT_GENRE_OPTIONS.map((option) => {
          const selected = value === option.value;
          return (
            <Grid item xs={4} key={option.value}>
              <Card
                sx={{
                  border: 2,
                  borderColor: selected ? "primary.main" : "divider",
                  bgcolor: selected ? "primary.50" : "background.paper",
                  textAlign: "center",
                  cursor: "pointer",
                  transition: "border-color 0.15s, background-color 0.15s",
                }}
                onClick={() => onChange(option.value)}
                elevation={selected ? 3 : 1}
              >
                <CardActionArea sx={{ p: 2 }}>
                  {option.image ? (
                    <Box
                      component="img"
                      src={option.image}
                      alt={option.value}
                      sx={{
                        width: 64,
                        height: 64,
                        objectFit: "contain",
                        mb: 1,
                        display: "block",
                        mx: "auto",
                      }}
                    />
                  ) : (
                    <Box
                      sx={{
                        width: 64,
                        height: 64,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        mx: "auto",
                        mb: 1,
                        bgcolor: "grey.100",
                        borderRadius: 1,
                      }}
                    >
                      <Typography variant="body2" color="text.secondary">
                        その他
                      </Typography>
                    </Box>
                  )}
                  <Typography
                    variant="caption"
                    fontWeight={selected ? "bold" : "normal"}
                    color={selected ? "primary.main" : "text.primary"}
                    sx={{ lineHeight: 1.2, display: "block" }}
                  >
                    {option.value}
                  </Typography>
                </CardActionArea>
              </Card>
            </Grid>
          );
        })}
      </Grid>
    </Box>
  );
}