"use client";

import { ListItem } from "@/lib/api";
import { MessageSquare, User } from "lucide-react";

interface ListItemCardProps {
  item: ListItem;
  onClick?: (item: ListItem) => void;
  onDragStart?: (e: React.DragEvent, item: ListItem) => void;
  onDragEnd?: (e: React.DragEvent) => void;
  isDragging?: boolean;
}

export function ListItemCard({ item, onClick, onDragStart, onDragEnd, isDragging }: ListItemCardProps) {
  const commentCount = item.comments?.length || 0;
  const assignedName = item.assigned_user?.name || item.assigned_user?.display_name || item.assigned_user?.email;

  return (
    <div
      draggable={!!onDragStart}
      onDragStart={(e) => onDragStart?.(e, item)}
      onDragEnd={onDragEnd}
      onClick={() => onClick?.(item)}
      className={`bg-white rounded-md shadow-sm border border-gray-200 p-3 cursor-pointer hover:shadow-md transition-shadow ${
        isDragging ? "opacity-50" : ""
      }`}
    >
      <div className="flex items-start justify-between gap-2">
        <p className="text-sm font-medium text-gray-800 flex-1">{item.name}</p>
        {item.status && (
          <span className="text-xs px-2 py-0.5 rounded-full bg-slack-purple/10 text-slack-purple font-medium whitespace-nowrap">
            {item.status}
          </span>
        )}
      </div>

      {item.description && (
        <p className="text-xs text-gray-500 mt-1 line-clamp-2">{item.description}</p>
      )}

      <div className="flex items-center gap-3 mt-2">
        {assignedName && (
          <div className="flex items-center gap-1 text-xs text-gray-500">
            <div className="w-5 h-5 rounded-full bg-slack-purple text-white flex items-center justify-center text-[10px] font-bold">
              {assignedName[0].toUpperCase()}
            </div>
            <span className="truncate max-w-[80px]">{assignedName}</span>
          </div>
        )}
        {commentCount > 0 && (
          <div className="flex items-center gap-1 text-xs text-gray-400">
            <MessageSquare size={12} />
            <span>{commentCount}</span>
          </div>
        )}
      </div>
    </div>
  );
}