'use client'

import React from 'react'
import { X } from '@phosphor-icons/react'
import { motion, AnimatePresence } from 'framer-motion'

interface AboutModalProps {
  isOpen: boolean
  onClose: () => void
}

export function AboutModal({ isOpen, onClose }: AboutModalProps) {
  if (!isOpen) return null

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <div className="fixed inset-0 bg-black/50 z-[100]" onClick={onClose} />
          <motion.div
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[101]"
          >
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-2xl p-4 sm:p-8 w-[90vw] max-w-[400px] border border-white/40 text-center relative mx-4">
              {/* Logo */}
              <div className="w-16 h-16 sm:w-24 sm:h-24 mx-auto mb-4 sm:mb-6 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg">
                <span className="text-white font-bold text-2xl sm:text-4xl">R</span>
              </div>

              {/* Title */}
              <h1 className="text-xl sm:text-3xl font-bold text-gray-900 mb-1 sm:mb-2">Reuben OS</h1>
              <p className="text-gray-500 text-xs sm:text-sm mb-4 sm:mb-6">Version 1.0.0</p>

              {/* Creator Info */}
              <div className="text-gray-600 font-medium text-xs sm:text-sm">
                Created by a huggingface user <a href="https://huggingface.co/Reubencf" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-blue-600 hover:underline transition-colors">Reubencf</a>
              </div>


              {/* Close Button */}
              <button
                onClick={onClose}
                className="absolute top-3 right-3 sm:top-4 sm:right-4 text-gray-400 hover:text-gray-600 transition-colors"
              >
                <X size={18} weight="bold" className="sm:w-5 sm:h-5" />
              </button>
            </div>
          </motion.div>
        </>
      )
      }
    </AnimatePresence >
  )
}