import React from 'react';
import {LucideIcon} from 'lucide-react';

type DetailFieldVariant = 'default' | 'compact';

interface DetailFieldProps {
    label: string;
    value: string | number | null | undefined;
    icon?: LucideIcon;
    variant?: DetailFieldVariant;
    preserveWhitespace?: boolean;
}

export default function DetailField({
                                        label,
                                        value,
                                        icon,
                                        variant = 'default',
                                        preserveWhitespace = true,
                                    }: DetailFieldProps): React.JSX.Element | null {
    if (variant === 'compact' && !value) return null;

    if (variant === 'compact') {
        return (
            <div className="mb-3">
                <span className="text-text-secondary text-xs block mb-1">{label}</span>
                <p className={`text-text-primary text-sm ${preserveWhitespace ? 'whitespace-pre-wrap' : ''}`}>
                    {value}
                </p>
            </div>
        );
    }
    
    function renderIcon(): React.JSX.Element | null {
        if (!icon) return null;
        const Icon: LucideIcon = icon;
        return <Icon className="w-4 h-4 text-primary" strokeWidth={1.75}/>;
    }

    return (
        <div className="p-5 bg-secondary rounded-xl">
            <div className="flex items-center gap-2 mb-3">
                {renderIcon()}
                <h3 className="text-text-primary font-semibold">{label}</h3>
            </div>
            <p className={`${preserveWhitespace ? 'whitespace-pre-wrap' : ''} ${value ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
                {value || '—'}
            </p>
        </div>
    );
}