import { formatCadastralBlock } from '@/lib/cadastral-code';
import { cn } from '@/lib/utils';
import { codigoDigits } from '../lib/codigoInventario';

type CodigoCatastralProps = {
    zona: number | string | null;
    manzano: number | string | null;
    lote: number | string | null;
    sublote?: number | string | null;
    size?: 'sm' | 'md' | 'lg';
    variant?: 'default' | 'muted';
    className?: string;
};

const sizeMap = {
    sm: 'px-1.5 py-0.5 text-[0.7rem]',
    md: 'px-2 py-1 text-[0.78rem]',
    lg: 'px-3 py-1.5 text-sm',
} as const;

export function CodigoCatastral({
    zona,
    manzano,
    lote,
    sublote,
    size = 'md',
    variant = 'default',
    className,
}: CodigoCatastralProps) {
    const blocks: string[] = [
        formatCadastralBlock(zona, codigoDigits.zona),
        formatCadastralBlock(manzano, codigoDigits.manzano),
        formatCadastralBlock(lote, codigoDigits.lote),
        ...(sublote !== undefined && sublote !== null
            ? [formatCadastralBlock(sublote, codigoDigits.sublote)]
            : []),
    ].filter((block) => block !== '');

    if (blocks.length === 0) {
        return null;
    }

    return (
        <div className={cn('flex flex-wrap items-center gap-1.5', className)}>
            {blocks.map((block, index) => (
                <span
                    key={`codigo-block-${index}`}
                    className={cn(
                        'rounded-md font-mono font-semibold tracking-[0.16em]',
                        sizeMap[size],
                        variant === 'muted'
                            ? 'bg-muted text-muted-foreground'
                            : 'bg-secondary text-secondary-foreground',
                    )}
                >
                    {block}
                </span>
            ))}
        </div>
    );
}