{label}

Copy manually
        </div>
    );
}

function ListBlock({
    label,
    items,
    warning = false,
}: {
    label: string;
    items: string[];
    warning?: boolean;
}) {
    return (
        <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-[#3c2b68] dark:bg-[#211740]">
            <h2 className="text-sm font-semibold text-[#0a1530] dark:text-[#efe8ff]">
                {label}
            </h2>
            {items.length > 0 ? (
                <div className="mt-3 flex flex-wrap gap-2">
                    {items.map((item) => (
                        <span
                            key={item}
                            className={
                                warning
                                    ? 'rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-medium text-amber-800 dark:border-amber-400/40 dark:bg-amber-400/10 dark:text-amber-100'
                                    : 'rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-medium text-sky-800 dark:border-sky-400/40 dark:bg-sky-400/10 dark:text-sky-100'
                            }
                        >
                            {item}
                        </span>
                    ))}
                </div>
            ) : (
                <p className="mt-3 text-sm text-slate-500 dark:text-[#bcaee6]">
                    No items generated.
                </p>
            )}
        </div>
    );
}

function FAQBlock({ faqs }: { faqs: FAQ[] }) {
    return (
        <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-[#3c2b68] dark:bg-[#211740]">
            <h2 className="text-sm font-semibold text-[#0a1530] dark:text-[#efe8ff]">
                FAQs
            </h2>
            {faqs.length > 0 ? (
                <div className="mt-3 space-y-3">
                    {faqs.map((faq) => (
                        <div
                            key={`${faq.question}-${faq.answer}`}
                            className="rounded-lg border border-slate-200 bg-slate-50 p-3 dark:border-[#3c2b68] dark:bg-[#160f2d]"
                        >
                            <p className="text-sm font-semibold text-[#0a1530] dark:text-[#efe8ff]">
                                {faq.question}
                            </p>
                            <p className="mt-1 text-sm text-slate-700 dark:text-[#c7bde8]">
                                {faq.answer}
                            </p>
                        </div>
                    ))}
                </div>
            ) : (
                <p className="mt-3 text-sm text-slate-500 dark:text-[#bcaee6]">
                    No FAQs generated.
                </p>
            )}
        </div>
    );
}

function StatusBadge({ status, label }: { status: string; label: string }) {
    const classes =
        status === 'reviewed'
            ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-200'
            : status === 'applied'
              ? 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-400/40 dark:bg-sky-400/10 dark:text-sky-200'
              : status === 'archived'
                ? 'border-slate-200 bg-slate-50 text-slate-600 dark:border-slate-400/40 dark:bg-slate-400/10 dark:text-slate-200'
                : 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-400/40 dark:bg-amber-400/10 dark:text-amber-200';

    return (
        <span
            className={`rounded-lg border px-3 py-2 text-sm font-semibold ${classes}`}
        >
            {label}
        </span>
    );
}
{suggestion.title || 'AI Content Suggestion'}

{label}
