import { Category } from "types/product";
import { MediaImage } from "@components/Media/Media";
import Container from "@components/Container/Container";
import Breadcrumb from "@components/Breadcrumb/Breadcrumb";
import Headline from "@components/Headline/Headline";
import Icon from "@components/Icon/Icon";
import "./BannerSecondary.scss";

interface BannerSecondaryProps {
    $data?: Category;
}
export default function BannerSecondary({ $data }: BannerSecondaryProps) {
    return (
        <div className="sxs-bansc">
            <div className={`sxs-bansc__bg sos-absolute before after${$data?.["es_verde"] ? " sxs-bansc__bg--green " : ""}`}>
                <MediaImage src={$data?.img} $figureProps={{ className: "media-cover" }} />
                <div className="sxs-bansc__wtm absolute size-full o_ring--after" />
            </div>
            <Container className="sxs-bansc__con0">
                <Breadcrumb $data={[{ title: "Inicio", url: "/" }, { title: $data?.["titulo"] }]} className="sxs-bansc__bcrm" />
                <div className="sxs-bansc__con1">
                    {$data?.["icon"] ? <Icon $name={`icon-misc1 ${$data["icon"]}`} /> : null}
                    <div className="sxs-bansc__con2">
                        <Headline $level="h1" $color="white" $textSize="50" $useShadow className="sxs-bansc__hdr">{$data?.["titulo"]}</Headline>
                        {
                            $data?.["descripcion"] ? (
                                <p className="sxs-bansc__des">{$data?.["descripcion"]}</p>
                            ) : null
                        }
                    </div>
                </div>
            </Container>
        </div>
    )
}