import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import Modal from '@/components/modal/Modal';

interface ReadOnlyProjectModalProps {
  isOpen: boolean;
  onClose: () => void;
  onDuplicate?: () => void; // Kept for compatibility but no longer used
}

export default function ReadOnlyProjectModal({
  isOpen,
  onClose,
  onDuplicate: _onDuplicate,
}: ReadOnlyProjectModalProps) {
  const handleCloseClick = () => {
    onClose(); // Only close the modal
  };

  if (!isOpen) {
    return null;
  }

  return (
    <Modal title='' onClose={onClose} width={450} className='overflow-auto'>
      <div className='flex flex-col items-center p-8 text-center'>
        <h2 className='mb-4 text-xl font-semibold text-foreground-primary'>
          This Project Is locked
        </h2>

        <p className='mb-8 max-w-sm text-sm leading-relaxed text-foreground-secondary'>
          Only the owner can edit, but you can view and play it.
        </p>

        <div className='flex justify-center'>
          <Button
            variant={ButtonVariant.Primary}
            size={ButtonSize.Medium}
            shape={ButtonShape.Pill}
            onClick={handleCloseClick}
          >
            Close
          </Button>
        </div>
      </div>
    </Modal>
  );
}