import React from "react";

// Props tipi
type HeroProps = {
  title : string,
  subtitle : string,
  content? : string,
  bgImage? : string,
  className? : string ,
  overlay? : boolean
};

const Hero: React.FC<HeroProps> = ({ bgImage, title, subtitle, content, className='text-white', overlay=true  }) => {
 

  return (
    <div className={`container-fluid h-80 bg-no-repeat  bg-cover bg-center relative  ${className}`}
    style={bgImage ? { backgroundImage: `url(${bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center' } : undefined}
    >
       { overlay &&   <div className="absolute w-full h-full left-0 top-0 black-gradient z-0"></div> }
        <div className="container h-full w-full   z-20 relative ">
        <div className="flex flex-col items-start justify-center h-full gap-1">
         <h1 className="text-lg" > {title}</h1>
         <h2 className="text-2xl"> {subtitle}</h2>
         <p className="w-3/4 text-sm hidden md:block"> {content} </p>
        </div>
        </div>
       
    </div>
  );
};

export default Hero;