'use client';

import { IconButton } from '@/ui/IconButton';
import { Image } from '@/ui/Image';
import { Modal } from '@/ui/Modal';
import { Text } from '@/ui/Text';
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={
        <div style={{ width: '100%', textAlign: 'center' }}>
          <Text size="xs" variant="low" uppercase>
            Precision Racing Media Viewer
          </Text>
        </div>
      }
      actions={
        <IconButton
          icon={Download}
          variant="secondary"
          size="sm"
          onClick={() => src && window.open(src, '_blank')}
          title="Download"
        />
      }
    >
      <div style={{ 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 && (
          <div style={{ position: 'absolute', left: '1rem', top: '50%', transform: 'translateY(-50%)' }}>
            <IconButton
              icon={ChevronLeft}
              variant="secondary"
              onClick={onPrev}
              title="Previous"
            />
          </div>
        )}
        {onNext && (
          <div style={{ position: 'absolute', right: '1rem', top: '50%', transform: 'translateY(-50%)' }}>
            <IconButton
              icon={ChevronRight}
              variant="secondary"
              onClick={onNext}
              title="Next"
            />
          </div>
        )}
      </div>
    </Modal>
  );
}