slp-modular-cms/frontend/src/features/availability/components/AvailabilityStatusBadge.tsx

import { AlertTriangle, CheckCircle, Clock, XCircle } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import type { AvailabilityStatus } from '@/features/availability/services/types';

interface AvailabilityStatusBadgeProps {
    status: AvailabilityStatus;
    message?: string;
    stale?: boolean;
}

const STATUS_CONFIG: Record<
    AvailabilityStatus,
    {
        labelKey: string;
        defaultMessageKey: string;
        /** When true the default translated message is always shown, ignoring any backend message. */
        alwaysDefault: boolean;
        colorClass: string;
        Icon: React.ComponentType<{ className?: string }>;
    }
> = {
    Available: {
        labelKey: 'availability.available',
        defaultMessageKey: 'availability.messageAvailable',
        alwaysDefault: true,
        colorClass: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
        Icon: CheckCircle,
    },
    Maintenance: {
        labelKey: 'availability.maintenance',
        defaultMessageKey: 'availability.messageMaintenance',
        alwaysDefault: false,
        colorClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
        Icon: AlertTriangle,
    },
    NotAvailable: {
        labelKey: 'availability.unavailable',
        defaultMessageKey: 'availability.messageUnavailable',
        alwaysDefault: false,
        colorClass: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
        Icon: XCircle,
    },
};

export function AvailabilityStatusBadge({
    status,
    message,
    stale = false,
}: AvailabilityStatusBadgeProps) {
    const { t } = useTranslation();
    const { labelKey, defaultMessageKey, alwaysDefault, colorClass, Icon } = STATUS_CONFIG[status];
    const displayMessage = alwaysDefault ? t(defaultMessageKey) : (message || t(defaultMessageKey));

    return (
        <div
            data-testid="availability-badge"
            className={stale ? 'rounded-lg border-2 border-dashed border-amber-400 p-3' : undefined}
        >
            <div className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium ${colorClass}`}>
                <Icon className="size-4" />
                <span data-testid="availability-status-label">{t(labelKey)}</span>
            </div>

            <p
                data-testid="availability-message"
                className="mt-2 text-sm text-muted-foreground"
            >
                {displayMessage}
            </p>

            {stale && (
                <div
                    data-testid="availability-stale-indicator"
                    className="mt-2 flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400"
                >
                    <Clock className="size-3" />
                    <span>{t('availability.staleLabel')}</span>
                </div>
            )}
        </div>
    );
}