import type { ReactNode } from 'react';

type Props = {
    badge: string;
    title: string;
    description: string;
    children: ReactNode;
    footer: ReactNode;
};

export default function AuthTempoCard({
    badge,
    title,
    description,
    children,
    footer,
}: Props) {
    return (
        <div className="w-full overflow-hidden rounded-3xl bg-slate-50 shadow-2xl ring-1 ring-black/5">
            <div className="p-5 sm:p-8 lg:p-10">
                <img
                    src="/images/logo/logo-vermelho.png"
                    alt="Tempo"
                    width="1787"
                    height="564"
                    className="mx-auto mb-4 h-14 w-auto"
                />

                <div className="mx-auto mb-8 max-w-2xl text-center">
                    <span className="mb-3 inline-flex rounded-full bg-red-100 px-3 py-1 text-xs font-bold tracking-wide text-[#b51219] uppercase">
                        {badge}
                    </span>
                    <h2 className="text-2xl font-bold text-slate-950 sm:text-3xl">
                        {title}
                    </h2>
                    <p className="mt-3 text-sm leading-6 text-slate-600">
                        {description}
                    </p>
                </div>

                {children}
            </div>

            <div className="border-t border-slate-200 bg-white p-5 text-center text-sm text-slate-600">
                {footer}
            </div>
        </div>
    );
}