'use client';

import { IconButton } from '@/ui/IconButton';
import { Image } from '@/ui/Image';
import { Modal } from '@/components/shared/Modal';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { ChevronLeft, ChevronRight, Download } from 'lucide-react';
import React from 'react';

export interface MediaViewerModalProps {
  isOpen: boolean;
  onClose: () => void;
  src?: string;
  alt?: string;
  title?: string;
  onNext?: () => void;
  onPrev?: () => void;
}

export function MediaViewerModal({
  isOpen,
  onClose,
  src,
  alt = 'Media viewer',
  title,
  onNext,
  onPrev,
}: MediaViewerModalProps) {
  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={title}
      size="xl"
      footer={
        <Box width="100%" textAlign="center">
          <Text size="xs" variant="low" uppercase>
            Precision Racing Media Viewer
          </Text>
        </Box>
      }
      actions={
        <IconButton
          icon={Download}
          variant="secondary"
          size="sm"
          onClick={() => src && window.open(src, '_blank')}
          title="Download"
        />
      }
    >
      <Box position="relative" display="flex" alignItems="center" justifyContent="center" minHeight="20rem">
        {src ? (
          <Image
            src={src}
            alt={alt}
            objectFit="contain"
          />
        ) : (
          <Text variant="low">No image selected</Text>
        )}

        {/* Navigation Controls */}
        {onPrev && (
          <Box position="absolute" left={4} top="50%" style={{ transform: 'translateY(-50%)' }}>
            <IconButton
              icon={ChevronLeft}
              variant="secondary"
              onClick={onPrev}
              title="Previous"
            />
          </Box>
        )}
        {onNext && (
          <Box position="absolute" right={4} top="50%" style={{ transform: 'translateY(-50%)' }}>
            <IconButton
              icon={ChevronRight}
              variant="secondary"
              onClick={onNext}
              title="Next"
            />
          </Box>
        )}
      </Box>
    </Modal>
  );
}