import type { ReactNode } from 'react';
import Glow from '@/components/site/glow';
import Icon from '@/components/site/icon';
import Pill from '@/components/site/pill';
import Section from '@/components/site/section';
import { useSiteInfo } from '@/hooks/use-site-info';

type CtaBannerProps = {
    badge: string;
    title: string;
    description: string;
    /** Usually one primary and one secondary <ButtonLink />. */
    actions: ReactNode;
    showContacts?: boolean;
};

/** Centered call-to-action card used to close informational pages. */
export default function CtaBanner({
    badge,
    title,
    description,
    actions,
    showContacts = true,
}: CtaBannerProps) {
    const site = useSiteInfo();
    const contacts = [
        { icon: 'call', label: site.phone.label },
        { icon: 'mail', label: site.email.busdev },
        { icon: 'location_on', label: 'Bintaro & Plaza Simatupang, Jakarta' },
    ];

    return (
        <Section
            size="narrow"
            background={
                <Glow className="-top-32 left-1/2 h-64 w-[48rem] -translate-x-1/2" />
            }
        >
            <div className="border-outline-variant/50 from-surface-container to-surface-container-low flex flex-col items-center gap-6 rounded-3xl border bg-gradient-to-b p-8 text-center shadow-xl md:p-14">
                <Pill tone="brand" icon="verified_user" className="self-center">
                    {badge}
                </Pill>
                <div className="flex max-w-2xl flex-col gap-3">
                    <h2 className="font-display text-on-surface lg:text-headline-xl text-3xl font-extrabold tracking-tight">
                        {title}
                    </h2>
                    <p className="text-on-surface-variant text-base leading-relaxed">
                        {description}
                    </p>
                </div>
                <div className="flex w-full flex-col items-center gap-4 sm:w-auto sm:flex-row">
                    {actions}
                </div>
                {showContacts && (
                    <div className="text-on-surface-variant flex flex-wrap items-center justify-center gap-x-6 gap-y-2 pt-2 text-sm">
                        {contacts.map((contact) => (
                            <span
                                key={contact.icon}
                                className="flex items-center gap-1.5"
                            >
                                <Icon
                                    name={contact.icon}
                                    className="text-primary text-base"
                                />
                                {contact.label}
                            </span>
                        ))}
                    </div>
                )}
            </div>
        </Section>
    );
}