import React from "react";
import Image from "next/image";

interface BannerProps {
  imageSrc?: string;
  height?: number;
  children?: React.ReactNode;
  className?: string;
  overlayOpacity?: number;
  gradientStartPercentage?: number;
  gradientEndOpacity?: number;
}

const Banner = ({
  imageSrc,
  height = 400,
  children,
  className = "",
  overlayOpacity = 50,
  gradientStartPercentage = 50,
  gradientEndOpacity = 95,
}: BannerProps) => {
  return (
    <div className={`flex justify-center mb-12 px-4 md:px-8 ${className}`}>
      <div
        className="relative w-full max-w-7xl overflow-hidden rounded-b-lg"
        style={{
          height: `${height}px`,
        }}
      >
        <div className="absolute inset-0">
          {imageSrc && (
            <Image
              src={imageSrc}
              alt="Banner Image"
              fill
              className="object-cover"
              priority
            />
          )}
        </div>
        <div className={`absolute inset-0 bg-black/${overlayOpacity}`} />
        <div
          className="absolute inset-0"
          style={{
            background: `linear-gradient(to bottom, transparent ${gradientStartPercentage}%, rgba(0,0,0,${
              gradientEndOpacity / 100
            }))`,
          }}
        />
        {children && (
          <div className="absolute inset-0 z-10 flex items-center justify-center">
            {children}
          </div>
        )}
      </div>
    </div>
  );
};

export default Banner;