import React from 'react';
import { Wifi, Battery, Signal } from 'lucide-react';

interface PhoneFrameProps {
  children: React.ReactNode;
  className?: string;
  isDark?: boolean;
}

export const PhoneFrame: React.FC<PhoneFrameProps> = ({ children, className = '', isDark = true }) => {
  return (
    <div className={`relative ${className} select-none`}>
      {/* Titanium Frame Chassis */}
      <div className="relative bg-[#2a2a2a] rounded-[3.5rem] p-[2px] shadow-[0_0_0_4px_#1a1a1a,0_20px_50px_-12px_rgba(0,0,0,0.8)] h-full ring-1 ring-white/10">
        
        {/* Inner Bezel (Black Border) */}
        <div className="absolute inset-[2px] rounded-[3.3rem] border-[6px] border-black pointer-events-none z-20" />

        {/* Screen Container */}
        <div className={`bg-black rounded-[3.2rem] overflow-hidden relative h-full flex flex-col w-full mask-image`}>
            
            {/* iOS Status Bar */}
            <div className="h-14 w-full absolute top-0 left-0 z-50 px-8 pt-4 flex justify-between items-start text-white pointer-events-none mix-blend-difference">
                 <span className="text-[15px] font-semibold tracking-normal pl-1">9:41</span>
                 
                 <div className="flex gap-1.5 items-center pr-1 text-white">
                     <Signal size={15} strokeWidth={2.5} className="fill-current" />
                     <Wifi size={15} strokeWidth={2.5} />
                     <div className="relative ml-1">
                       <Battery size={22} strokeWidth={2} className="text-white/90" />
                       {/* Battery Fill */}
                       <div className="absolute top-1/2 left-[2.5px] -translate-y-1/2 w-[10px] h-[7px] bg-white rounded-[1px]" />
                     </div>
                 </div>
            </div>

             {/* Dynamic Island */}
             <div className="absolute left-1/2 -translate-x-1/2 top-[11px] w-[120px] h-[36px] bg-black rounded-[20px] z-50 flex items-center justify-center pointer-events-none">
                <div className="flex items-center justify-end w-full h-full relative px-4">
                    {/* Selfie Camera Lens */}
                    <div className="w-3 h-3 rounded-full bg-[#101010] ring-1 ring-white/5 relative overflow-hidden">
                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-900/30 to-transparent" />
                        <div className="absolute top-1 right-1 w-1 h-1 bg-white/10 rounded-full blur-[1px]" />
                    </div>
                </div>
             </div>

            {/* Screen Content */}
            <div className="relative z-10 h-full w-full flex flex-col bg-black text-white font-sans antialiased">
                {children}
            </div>

            {/* Home Indicator */}
            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-36 h-1.5 bg-white rounded-full z-50 pointer-events-none mix-blend-exclusion" />
        </div>
      </div>
      
      {/* Hardware Buttons */}
      <div className="absolute top-28 -left-[3px] w-[3px] h-8 bg-[#1a1a1a] rounded-l-sm shadow-[-1px_0_2px_rgba(255,255,255,0.1)]" /> {/* Action */}
      <div className="absolute top-44 -left-[3px] w-[3px] h-16 bg-[#1a1a1a] rounded-l-sm shadow-[-1px_0_2px_rgba(255,255,255,0.1)]" /> {/* Vol Up */}
      <div className="absolute top-64 -left-[3px] w-[3px] h-16 bg-[#1a1a1a] rounded-l-sm shadow-[-1px_0_2px_rgba(255,255,255,0.1)]" /> {/* Vol Down */}
      <div className="absolute top-52 -right-[3px] w-[3px] h-24 bg-[#1a1a1a] rounded-r-sm shadow-[1px_0_2px_rgba(255,255,255,0.1)]" /> {/* Power */}
    </div>
  );
};