import { cn } from '@/lib/utils';

/*
 * InfoBanner — mini banner do DS (209:5232): card colorido arredondado com uma
 * imagem (recorte) opcional estourando no topo e título + descrição abaixo.
 * Reutilizado em Programa Elas, Renova Omni e A Omni. Cores da paleta de
 * marketing (mkt-*).
 */
export type BannerColor = 'blue' | 'orange' | 'lightblue';

export interface BannerItem {
    title: string;
    description?: string;
    /** Imagem (recorte) que estoura no topo do card colorido. */
    image?: string;
    /** Ajuste fino do enquadramento da imagem (ex.: 'h-[132%] translate-y-[7%]'). */
    imageClassName?: string;
    color?: BannerColor;
}

const COLOR_BG: Record<BannerColor, string> = {
    blue: 'bg-mkt-blue-300',
    orange: 'bg-mkt-orange',
    lightblue: 'bg-mkt-blue-100',
};

export function InfoBanner({ item }: { item: BannerItem }) {
    const bg = COLOR_BG[item.color ?? 'blue'];
    return (
        // Mobile: largura limitada e centralizada (não estoura em tela larga).
        <div className="mx-auto flex w-full max-w-[340px] flex-col web:max-w-none">
            <div className="relative">
                <div className={cn('aspect-[4/3] overflow-hidden rounded-[28px]', bg)} aria-hidden />
                {item.image && (
                    <img
                        src={item.image}
                        alt=""
                        className={cn(
                            'pointer-events-none absolute inset-x-0 bottom-0 z-10 mx-auto h-[118%] w-auto max-w-none object-contain object-bottom',
                            item.imageClassName,
                        )}
                    />
                )}
            </div>
            <h3 className="mt-6 text-heading-sm font-bold text-gray-800">{item.title}</h3>
            {item.description && <p className="mt-2 text-body text-gray-600">{item.description}</p>}
        </div>
    );
}