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

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

export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
  <Paper
    elevation={3}
    sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
  >
    <CardContent>
      <Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
        <Box sx={{ display: "flex", gap: 1 }}>
          {icon}
          <Typography variant="h6" fontWeight="bold">
            {title}
          </Typography>
        </Box>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <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}
              primaryTypographyProps={{ fontSize: 14 }}
              secondaryTypographyProps={{ fontSize: 12 }}
            />
          </ListItem>
        ))}
      </List>
    </CardContent>
  </Paper>
);
