import { Avatar } from "./Avatar";
import { Badge } from "./Badge";
import type { BadgeColorName } from "@/theme/accents";

interface ListItemProps {
  title: string;
  subtitle?: string;
  image?: string | null;
  badge?: string;
  badgeColor?: BadgeColorName;
  onClick?: () => void;
  onCycle?: () => void;
  onDelete?: () => void;
}

export function ListItem({ title, subtitle, image, badge, badgeColor, onClick, onCycle, onDelete }: ListItemProps) {
  return (
    <div
      class="group flex items-center justify-between rounded-[var(--z-radius-card)] cursor-pointer transition-all"
      style={{ border: "var(--z-card-border)", boxShadow: "var(--z-card-shadow)", padding: "var(--z-density-padding)" }}
      onClick={onClick}
      onMouseOver={(e) => {
        (e.currentTarget as HTMLElement).style.borderColor = "var(--z-border-hover)";
        (e.currentTarget as HTMLElement).style.background = "var(--z-card-bg)";
      }}
      onMouseOut={(e) => {
        (e.currentTarget as HTMLElement).style.borderColor = "var(--z-border)";
        (e.currentTarget as HTMLElement).style.background = "transparent";
      }}
    >
      <div class="flex items-center min-w-0 flex-1 gap-2.5">
        <Avatar name={title} image={image} />
        <div class="min-w-0 flex-1">
          <p class="text-sm font-medium truncate">{title || "—"}</p>
          {subtitle && <p class="text-[var(--z-font-sm)] mt-0.5" style={{ color: "var(--z-muted)" }}>{subtitle}</p>}
        </div>
      </div>
      <div class="flex items-center gap-1 ml-3 shrink-0">
        {onCycle && (
          <button
            class="w-6 h-6 rounded-md text-xs opacity-0 group-hover:opacity-100 transition-opacity"
            style={{ color: "var(--z-muted)" }}
            onClick={(e) => { e.stopPropagation(); onCycle(); }}
            title="Cycle"
          >↻</button>
        )}
        {onDelete && (
          <button
            class="w-6 h-6 rounded-md text-xs opacity-0 group-hover:opacity-100 transition-opacity hover:text-red-400"
            style={{ color: "var(--z-muted)" }}
            onClick={(e) => { e.stopPropagation(); onDelete(); }}
            title="Delete"
          >×</button>
        )}
        {badge && <Badge text={badge} color={badgeColor} />}
        <span class="text-[var(--z-font-sm)] ml-1 opacity-0 group-hover:opacity-30 transition-opacity" style={{ color: "var(--z-muted)" }}>→</span>
      </div>
    </div>
  );
}
