// Gallery.tsx
import React from 'react';
import SafeGrid from './SafeGrid';
import { WeddingPhoto } from './types';
import { Box, Card, CardContent, CardMedia, Chip, IconButton, Typography } from '@mui/material';
import { Download } from '@mui/icons-material';

type Props = {
    photos: WeddingPhoto[];
    onDownload?: (url: string, title?: string) => void;
};

const Gallery: React.FC<Props> = ({ photos, onDownload }) => {
    return (
        <SafeGrid container spacing={3}>
            {photos.map((p) => (
                <SafeGrid item xs={12} sm={6} md={4} key={p.id}>
                    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                        <Box sx={{ position: 'relative' }}>
                            <CardMedia component="img" height="250" image={p.url} alt={p.title} sx={{ objectFit: 'cover' }} />
                            <Box sx={{ position: 'absolute', top: 8, right: 8 }}>
                                <IconButton size="small" onClick={() => onDownload?.(p.url, p.title)} sx={{ color: 'white', bgcolor: 'rgba(0,0,0,0.6)' }}>
                                    <Download fontSize="small" />
                                </IconButton>
                            </Box>
                        </Box>
                        <CardContent sx={{ bgcolor: '#fffaf0', flexGrow: 1 }}>
                            <Typography variant="h6">{p.title || 'Untitled'}</Typography>
                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <Chip label={p.title ?? '—'} size="small" color="primary" variant="outlined" />
                                <Typography variant="caption" color="text.secondary">
                                    {p.created_at ? new Date(p.created_at).toLocaleDateString() : p.date ? new Date(p.date).toLocaleDateString() : ''}
                                </Typography>
                            </Box>
                        </CardContent>
                    </Card>
                </SafeGrid>
            ))}
        </SafeGrid>
    );
};

export default Gallery;
