import { AlertTriangle } from 'lucide-react';
import type { DocumentDetail } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';

type DocumentReviewReasonBannerProps = {
    document: DocumentDetail;
    compact?: boolean;
};

export function DocumentReviewReasonBanner({ document, compact = false }: DocumentReviewReasonBannerProps) {
    const { t } = useI18n();
    const reasonKey = t('documents.admin_show.metadata.reason_key');
    const latestReason = document.activity_timeline.data
        .flatMap((item) => item.metadata)
        .find((meta) => meta.key === reasonKey);

    if (!latestReason) {
        return null;
    }

    return (
        <div
            className={
                compact
                    ? 'rounded-md border border-warning-soft bg-warning-soft/40 px-3 py-2'
                    : 'rounded-md border border-warning-soft bg-warning-soft/50 px-4 py-3'
            }
        >
            <div className="flex items-center gap-2">
                <span className="rounded-sm bg-warning-soft p-1 text-warning-soft-foreground">
                    <AlertTriangle className="h-3.5 w-3.5" />
                </span>
                <p className="text-xs font-semibold uppercase tracking-wide text-warning-soft-foreground">
                    {t('documents.admin_show.reason_banner.title')}
                </p>
            </div>
            <p className={compact ? 'mt-1 text-sm text-foreground' : 'mt-2 text-sm text-foreground'}>
                {latestReason.value}
            </p>
        </div>
    );
}