import { condensedFont } from "@/app/layout";
import ButtonLink from "@/components/UI/ButtonLink";
import { BannerProps } from "@/types/elements";
import { IconFilePencil, IconId, IconUser } from "@tabler/icons-react";

export const revalidate = 60;

export default async function Banner({ title, subtitle, backgroundImage, logoImage }: BannerProps) {
    return (
        <section className="relative w-full">
            <div className="hero bg-base-200 min-h-8 h-min overflow-hidden" >
                <div className="absolute inset-0 overflow-hidden">
                    <div className="w-full h-full " style={{
                        backgroundImage: `url(${backgroundImage})`
                    }}></div>
                </div>

                <div className="absolute inset-0 bg-black opacity-40"></div>

                <div className="hero-content px-0 gap-8 max-w-5xl py-8 flex flex-col lg:flex-row justify-center">
                    <a role="button" href="/" className="flex justify-center items-center max-w-48 w-full">
                        <img
                            src={logoImage}
                            className="object-cover w-auto h-full"
                        />
                    </a>

                    <div className="space-y-2">
                        <p className="text-white text-xl text-center sm:text-left">
                            {subtitle}
                        </p>
                        <h1 className={`text-3xl font-semibold text-white ${condensedFont.className} text-center sm:text-left`}>{title}</h1>
                    </div>

                    <div className="flex flex-col space-y-4">
                        <ButtonLink href="https://lk.jkhsakha.ru" label="Личный кабинет" iconLeft={<IconUser />} />
                        <ButtonLink href="/uznat-licevoj-schet-po-adresu" label="Узнать лицевой счет" iconLeft={<IconId />} />
                        <ButtonLink href="/obrashhenie-grazhdan" label="Подать обращение" iconLeft={<IconFilePencil />} />
                    </div>
                </div>
            </div>
        </section>
    )
}