'use client';

import { format } from 'date-fns';
import { fr } from 'date-fns/locale';
import { FolderOpen, Lock } from 'lucide-react';

import { estDossierScelle, libelleStatutDossier, type Dossier } from '@/lib/types';
import { cn } from '@/lib/utils';

type StatutDossierBadgeProps = {
  dossier: Pick<Dossier, 'statut' | 'scelle_le'>;
  className?: string;
};

export function StatutDossierBadge({ dossier, className }: StatutDossierBadgeProps) {
  const scelle = estDossierScelle(dossier);

  return (
    <span
      className={cn(
        'inline-flex w-fit items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
        scelle ? 'bg-amber-100 text-amber-800' : 'bg-sky-100 text-sky-700',
        className,
      )}
      title={
        scelle && dossier.scelle_le
          ? `Scellé le ${format(new Date(dossier.scelle_le), 'dd/MM/yyyy à HH:mm', { locale: fr })}`
          : undefined
      }
    >
      {scelle ? (
        <Lock className="h-3.5 w-3.5" />
      ) : (
        <FolderOpen className="h-3.5 w-3.5" />
      )}
      {libelleStatutDossier(dossier.statut)}
    </span>
  );
}