import type { HTMLAttributes, ReactNode } from 'react';
import { cn } from '../utils/cn.ts';

interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
  selected?: boolean;
  highlighted?: boolean;
  children: ReactNode;
}

export function ListItem({ selected, highlighted, className, children, ...props }: ListItemProps) {
  return (
    <div
      className={cn(
        'flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-[10px] transition-colors duration-100 select-none',
        'hover:bg-wing-card',
        selected && 'bg-[rgba(14,234,255,0.16)] border-[rgba(14,234,255,0.55)]',
        highlighted && !selected && 'bg-[rgba(245,158,11,0.16)] border border-[rgba(245,158,11,0.4)]',
        selected && highlighted && 'bg-gradient-to-r from-[rgba(14,234,255,0.16)] to-[rgba(245,158,11,0.16)] border-[rgba(14,234,255,0.7)]',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}