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


import MoreVertIcon from '@mui/icons-material/MoreVert';

interface SectionCardItem {
  title: string;
  date?: string;
}

interface SectionCardProps {
  title: string;
  icon?: React.ReactNode;
  items: SectionCardItem[];
}

export const SectionCard: React.FC<SectionCardProps> = ({ title, icon, items }) => (
  <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' }}>
          {icon}
          <Typography variant="subtitle1" 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={index} disableGutters>
            <ListItemText
              primary={item.title}
              secondary={item.date}
              primaryTypographyProps={{ fontSize: 14 }}
              secondaryTypographyProps={{ fontSize: 12 }}
            />
          </ListItem>
        ))}
      </List>
    </CardContent>
  </Paper>
);