import React, {ReactNode} from 'react';
import {ChevronRight} from 'lucide-react';

type EntityListItemSize = 'sm' | 'md';
type EntityListItemVariant = 'default' | 'transparent';

interface EntityListItemProps {
    onClick: () => void;
    avatar: ReactNode;
    title: string;
    subtitle?: string | null;
    extra?: ReactNode;
    size?: EntityListItemSize;
    variant?: EntityListItemVariant;
}

const rowClasses: Record<EntityListItemSize, Record<EntityListItemVariant, string>> = {
    sm: {
        default: 'group flex items-center p-3 bg-tertiary rounded-lg cursor-pointer hover:bg-secondary transition-colors duration-150',
        transparent: 'group flex items-center p-3 rounded-lg cursor-pointer hover:bg-dark-background transition-colors duration-150',
    },
    md: {
        default: 'group flex items-center p-4 bg-tertiary rounded-xl cursor-pointer hover:bg-secondary transition-colors duration-150',
        transparent: 'group flex items-center p-4 rounded-xl cursor-pointer hover:bg-dark-background transition-colors duration-150',
    },
};

const contentClasses: Record<EntityListItemSize, { margin: string; title: string; subtitle: string }> = {
    sm: {
        margin: 'ml-3',
        title: 'text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate',
        subtitle: 'text-muted text-xs truncate',
    },
    md: {
        margin: 'ml-4',
        title: 'text-text-primary font-bold text-base group-hover:text-primary transition-colors',
        subtitle: 'text-text-secondary text-sm mt-0.5 truncate',
    },
};

const chevronClasses: Record<EntityListItemSize, { container: string; icon: string }> = {
    sm: {
        container: 'w-6 flex justify-center',
        icon: 'text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3',
    },
    md: {
        container: 'w-8 flex justify-center',
        icon: 'text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-4 h-4',
    },
};

export default function EntityListItem({
                                           onClick,
                                           avatar,
                                           title,
                                           subtitle,
                                           extra,
                                           size = 'md',
                                           variant = 'default',
                                       }: EntityListItemProps): React.JSX.Element {
    const content: { margin: string; title: string; subtitle: string } = contentClasses[size];
    const chevron: { container: string; icon: string } = chevronClasses[size];

    return (
        <div onClick={onClick} className={rowClasses[size][variant]}>
            {avatar}
            
            <div className={`${content.margin} flex-1 min-w-0`}>
                <div className={content.title}>{title}</div>
                {subtitle && (
                    <div className={content.subtitle}>{subtitle}</div>
                )}
            </div>
            
            {extra && (
                <div className="px-3">
                    {extra}
                </div>
            )}
            
            <div className={chevron.container}>
                <ChevronRight className={chevron.icon} strokeWidth={1.75}/>
            </div>
        </div>
    );
}