import { twMerge } from 'tailwind-merge';

export const HeroBanner = ({
  leftSection,
  rightSection,
  backgroundImage,
  className,
}: {
  leftSection: React.ReactNode;
  rightSection: React.ReactNode;
  backgroundImage?: string;
} & React.HTMLAttributes<HTMLDivElement>) => {
  return (
    <div
      className={twMerge(
        'flex flex-col gap-2 rounded-xl p-4 pt-0 md:gap-4 lg:min-h-[286px] lg:flex-row lg:items-end lg:justify-between lg:gap-8 lg:p-6',
        className
      )}
      style={
        backgroundImage
          ? {
              backgroundImage,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }
          : undefined
      }
    >
      {leftSection}
      {rightSection}
    </div>
  );
};

export default HeroBanner;