// FolderGrid.tsx
import React from 'react';
import SafeGrid from './SafeGrid';
import { FolderInfo } from './types';
import { Box, Card, CardContent, CardMedia, IconButton, Paper, Typography } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';

type Props = {
    folders: FolderInfo[];
    onOpen: (title: string) => void;
    onDeleteFolder: (title: string) => void;
};

const FolderGrid: React.FC<Props> = ({ folders, onOpen, onDeleteFolder }) => {
    if (!folders.length) {
        return (
            <Paper sx={{ p: 6, textAlign: 'center' }}>
                <Typography variant="h6" color="text.secondary">No events found</Typography>
                <Typography variant="body2" color="text.secondary">Upload photos to create events (folders).</Typography>
            </Paper>
        );
    }

    return (
        <SafeGrid container spacing={3}>
            {folders.map((f) => (
                <SafeGrid item xs={12} sm={6} md={4} key={f.title}>
                    <Card sx={{ cursor: 'pointer', transition: 'transform .15s', '&:hover': { transform: 'translateY(-6px)' } }}>
                        <Box onClick={() => onOpen(f.title)}>
                            <Box sx={{ height: 200, overflow: 'hidden' }}>
                                <CardMedia component="img" image={f.thumb ?? ''} alt={f.title} sx={{ width: '100%', height: 200, objectFit: 'cover', backgroundColor: '#f4f6f7' }} />
                            </Box>
                            <CardContent>
                                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                    <Box sx={{ minWidth: 0 }}>
                                        <Typography variant="subtitle1" noWrap>{f.title}</Typography>
                                        <Typography variant="caption" color="text.secondary">{f.count} photos</Typography>
                                    </Box>
                                    <Box>
                                        <IconButton edge="end" size="small" aria-label="delete folder" onClick={(e) => { e.stopPropagation(); onDeleteFolder(f.title); }}>
                                            <DeleteIcon />
                                        </IconButton>
                                    </Box>
                                </Box>
                            </CardContent>
                        </Box>
                    </Card>
                </SafeGrid>
            ))}
        </SafeGrid>
    );
};

export default FolderGrid;
