'use client';

import React from 'react';
import { CheckCircle2, Clock, AlertTriangle, Hourglass } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { InstallationStatus } from '@/models/teltoinstall/_index';

type StatusStyle = {
  badge: string;
  border: string;
  icon: React.ComponentType<{ className?: string }>;
};

export const STATUS_STYLES: Record<InstallationStatus, StatusStyle> = {
  validated: {
    badge: 'bg-emerald-100 text-emerald-700',
    border: 'border-l-emerald-500',
    icon: CheckCircle2,
  },
  in_progress: {
    badge: 'bg-amber-100 text-amber-700',
    border: 'border-l-amber-500',
    icon: Clock,
  },
  gps_error: {
    badge: 'bg-red-100 text-red-700',
    border: 'border-l-red-500',
    icon: AlertTriangle,
  },
  // Installation complète mais véhicule non rattaché au parc fleet.
  pending: {
    badge: 'bg-sky-100 text-sky-700',
    border: 'border-l-sky-500',
    icon: Hourglass,
  },
};

export function InstallationStatusBadge({ status }: { status: InstallationStatus }) {
  const { t } = useTranslation();
  const style = STATUS_STYLES[status] ?? STATUS_STYLES.in_progress;
  const Icon = style.icon;
  return (
    <span
      className={`inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-1 rounded-full ${style.badge}`}
    >
      <Icon className="w-3 h-3" />
      {t(`history.status.${status}`)}
    </span>
  );
}