import {
  CardContent,
  Typography,
  Divider,
  List,
  ListItem,
  ListItemText,
  Paper,
  Box,
  IconButton,
} from "@mui/material";

import MoreVertIcon from "@mui/icons-material/MoreVert";
import { ISectionCardProps } from "./types";

import "./SectionCard.scss";

export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
  <Paper className="section-card" elevation={3}>
    <CardContent>
      <Box className="section-card__header">
        <Box className="section-card__title">
          {icon}
          <Typography variant="h6" fontWeight="bold">
            {title}
          </Typography>
        </Box>
        <Box className="section-card__icon-wrapper">
          <IconButton size="small">
            <MoreVertIcon fontSize="small" />
          </IconButton>
        </Box>
      </Box>
      <Divider />
      <List dense disablePadding>
        {items.map((item, index) => (
          <ListItem key={item.title + index} disableGutters>
            <ListItemText primary={item.title} secondary={item.date} />
          </ListItem>
        ))}
      </List>
    </CardContent>
  </Paper>
);