"use client";

import { X, ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";
import Image from "next/image";

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

export function PeriodicTable({ isOpen, onClose }: PeriodicTableProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md">
      <div className="bg-background border border-border shadow-2xl rounded-2xl overflow-hidden flex flex-col w-[95vw] max-w-[1400px] h-[95vh]">
        <div className="p-4 border-b border-border flex justify-between items-center bg-secondary/80">
          <h3 className="font-bold text-lg">Periodic Table of Elements</h3>
          <div className="flex gap-2">
             <button onClick={onClose} className="text-muted-foreground hover:text-foreground ml-2 p-2">
               <X size={24} />
             </button>
          </div>
        </div>
        <div className="flex-1 bg-white p-4 flex items-center justify-center overflow-auto">
          <div className="relative min-w-[1000px] w-full h-full flex items-center justify-center">
             <img 
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Periodic_table_large.svg/1920px-Periodic_table_large.svg.png"
                alt="Periodic Table"
                className="object-contain w-full h-full max-h-[90vh]"
             />
          </div>
        </div>
      </div>
    </div>
  );
}