import { Button } from "../../index";

export default function Hero1(Props: Hero.Hero3) {
    const {
        children,
        title,
        img,
        alt,
        responsive,
        isH2,
        className,
        width = "w-[400px]",
        height = "h-[300px]",
        back = undefined,
        transition = undefined,
    } = Props;

    const backProps = back
        ? {
              href: back.href,
              ariaLabel: back.ariaLabel,
              className: back.className,
          }
        : null;

    const titleClass: string = "text-center text my-auto";

    return (
        <section
            className={`grid grid-cols-1 lg:grid-cols-2 p-6 gap-3 lg:text-left rounded-md mx-auto darkContainer ${className}`}
        >
            <div className="m-auto">
                <div className="flex">
                    {backProps && <Button.Back {...backProps} />}
                    {isH2 ? (
                        <h2 className={titleClass}>{title}</h2>
                    ) : (
                        <h1 className={titleClass}>{title}</h1>
                    )}
                </div>
                {children}
            </div>
            <picture>
                {responsive && (
                    <source srcSet={responsive} media="(max-width: 767px)" />
                )}
                <source srcSet={img} media="(min-width: 768px)" />
                <img
                    src={img}
                    alt={alt}
                    loading="lazy"
                    className={`mx-auto ${width} ${height} object-cover rounded-sm`}
                    style={{ viewTransitionName: transition }}
                />
            </picture>
        </section>
    );
}