import { Link } from '@inertiajs/react';

export type EducationalArticle = {
    title: string;
    href: string;
    summary: string;
    author?: string;
    image: { href: string; alt: string } | null;
    opportunities_href?: string | null;
    opportunities_label?: string | null;
    has_opportunities?: boolean;
};

export default function EducationalArticleCard({
    article,
}: {
    article: EducationalArticle;
}) {
    const focus =
        'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-emerald-800';
    return (
        <article className="flex min-w-0 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white text-slate-900 shadow-sm">
            {article.image && (
                <img
                    className="aspect-[16/9] w-full object-cover"
                    src={article.image.href}
                    alt={article.image.alt}
                    loading="lazy"
                    width={800}
                    height={450}
                />
            )}
            <div className="flex flex-1 flex-col items-start gap-4 p-5 sm:p-6">
                <p className="text-sm font-medium text-emerald-800">
                    Guia sectorial
                </p>
                <h3 className="text-2xl leading-tight font-bold">
                    <Link href={article.href} className={focus}>
                        {article.title}
                    </Link>
                </h3>
                {article.summary && (
                    <p className="text-base leading-relaxed text-slate-700">
                        {article.summary}
                    </p>
                )}
                {article.author && (
                    <p className="text-sm text-slate-600">
                        Por {article.author}
                    </p>
                )}
                <div className="mt-auto flex flex-wrap items-center gap-x-5 gap-y-3 pt-2">
                    <Link
                        href={article.href}
                        className={`inline-flex min-h-11 items-center rounded-lg bg-emerald-900 px-5 py-3 font-semibold text-white hover:bg-emerald-800 ${focus}`}
                    >
                        Ler o guia
                    </Link>
                    {article.has_opportunities &&
                        article.opportunities_href && (
                            <Link
                                href={article.opportunities_href}
                                className={`inline-flex min-h-11 items-center py-2 font-semibold text-emerald-900 underline underline-offset-4 ${focus}`}
                            >
                                {article.opportunities_label ??
                                    'Ver oportunidades'}
                            </Link>
                        )}
                </div>
            </div>
        </article>
    );
}