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-[var(--wing-select-bg)] border-[var(--wing-select-border)]',
        highlighted && !selected && 'bg-[var(--wing-highlight-bg)] border border-[var(--wing-highlight-border)]',
        selected && highlighted && 'bg-gradient-to-r from-[var(--wing-select-bg)] to-[var(--wing-highlight-bg)] border-[var(--wing-select-border)]',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}
