import Image from "next/image";
import CloseButton from "../close-button";

type TelModalHeaderProps = {
  children: React.ReactNode;
};

const TelModalHeader = ({ children }: TelModalHeaderProps) => {
  return (
    <div className="relative h-[15.625rem] md:h-[14.375rem] md:p-8 flex justify-end">
      <Image
        src="/images/hero-img-modal-desktop.jpg"
        alt="Ímagen de fondo"
        fill
        className="object-cover hidden sm:block"
        sizes="50vw"
        quality={90}
        priority
      />
      <Image
        src="/images/hero-img-modal-mobile.jpg"
        alt="Ímagen de fondo"
        fill
        className="object-cover sm:hidden object-top"
        sizes="90vw"
        quality={90}
        priority
      />
      {children}
      <CloseButton className="absolute right-0 top-0 md:relative" />
    </div>
  );
};

export default TelModalHeader;