'use client';
import { Dialog, IconButton, Box } from '@mui/material';
import { Close } from '@mui/icons-material';
import Image from 'next/image';

export interface ModalMedia {
    type: 'image' | 'video';
    url: string;
    poster?: string;
}

interface MediaViewerModalProps {
    open: boolean;
    media: ModalMedia | null;
    onClose: () => void;
}

const MediaViewerModal: React.FC<MediaViewerModalProps> = ({ open, media, onClose }) => {
    return (
        <Dialog
            open={open}
            onClose={onClose}
            maxWidth="lg"
            fullWidth
            PaperProps={{
                sx: {
                    backgroundColor: '#000',
                    boxShadow: 'none',
                    position: 'relative',
                    overflow: 'hidden'
                }
            }}
        >
            <IconButton
                onClick={onClose}
                sx={{
                    position: 'absolute',
                    top: 8,
                    right: 8,
                    zIndex: 20,
                    color: '#fff',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    '&:hover': { backgroundColor: 'rgba(0,0,0,0.7)' }
                }}
            >
                <Close />
            </IconButton>

            {media?.type === 'image' && (
                <Box sx={{ position: 'relative', width: '100%', height: { xs: '70vh', md: '85vh' } }}>
                    <Image src={media.url} alt="Full view" fill style={{ objectFit: 'contain' }} />
                </Box>
            )}

            {media?.type === 'video' && (
                <Box
                    sx={{
                        width: '100%',
                        maxHeight: '85vh',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: '#000'
                    }}
                >
                    <video src={media.url} poster={media.poster} controls autoPlay style={{ width: '100%', maxHeight: '85vh' }} />
                </Box>
            )}
        </Dialog>
    );
};

export default MediaViewerModal;