import { Portal } from '@/types';

export default function HeroBanner({ portal }: { portal: Partial<Portal> }) {
  const themeColor = portal?.themeColor || '#1e3a8a';

  return (
    <div 
      className="relative text-white text-center py-20 px-4 min-h-[40vh] flex flex-col justify-center"
      style={{ 
        backgroundImage: portal?.heroImageUrl ? `url(${portal.heroImageUrl})` : 'none',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundColor: themeColor 
      }}
    >
       {/* Dynamic Overlay: Either a solid dark tint, or a fade into the theme color */}
       <div 
         className="absolute inset-0"
         style={{
           background: portal?.fadeHeroImage 
             ? `linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, ${themeColor} 100%)`
             : 'rgba(0,0,0,0.6)'
         }}
       ></div> 
       
       <div className="relative z-10 max-w-4xl mx-auto flex flex-col items-center">
         {portal?.logoUrl && (
           <img 
             src={portal.logoUrl} 
             alt="Institution Logo" 
             className="h-24 mb-6 object-contain bg-white/90 p-2 rounded-xl shadow-lg" 
           />
         )}
         <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 drop-shadow-md">
           {portal?.title || 'Welcome to the Network'}
         </h1>
         <p className="text-lg md:text-2xl drop-shadow-md font-light">
           {portal?.welcomeText || 'Please contact administration to set up.'}
         </p>
       </div>
    </div>
  );
}