import Navbar from '../../navbar';
import { IInnerPageBannerProps } from './banner';

export default function InnerPageBanner({
  title,
  imageSrc,
  subtitle,
}: IInnerPageBannerProps) {
  return (
    <header
      className="relative h-[50%] w-full bg-cover bg-right bg-no-repeat text-white"
      style={{ backgroundImage: `url(${imageSrc})` }}
    >
      <div className="absolute inset-0 z-0 bg-black opacity-50" />
      <Navbar />
      <div className="relative z-10 container mx-auto flex flex-col bg-cover bg-right-top py-20 text-white">
        {title ? <h2 className="text-[4rem] text-white">{title}</h2> : <></>}
        {subtitle ? <h2 className="text-lg text-white">{subtitle}</h2> : <></>}
      </div>
    </header>
  );
}
