'use client';

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Issue } from '@/lib/api/issues';

interface IssueCardProps {
  issue: Issue;
}

export function IssueCard({ issue }: IssueCardProps) {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id: issue.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const priorityColors = {
    Low: 'bg-gray-100 text-gray-700',
    Medium: 'bg-blue-100 text-blue-700',
    High: 'bg-orange-100 text-orange-700',
    Critical: 'bg-red-100 text-red-700',
  };

  const typeIcons = {
    Story: '📖',
    Task: '✓',
    Bug: '🐛',
    Epic: '🚀',
  };

  return (
    <Card
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      className="cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
    >
      <CardContent className="p-3 space-y-2">
        <div className="flex items-start gap-2">
          <span>{typeIcons[issue.type]}</span>
          <h3 className="text-sm font-medium flex-1">{issue.title}</h3>
        </div>
        <div className="flex items-center gap-2">
          <Badge variant="outline" className={priorityColors[issue.priority]}>
            {issue.priority}
          </Badge>
          <Badge variant="secondary">{issue.type}</Badge>
        </div>
      </CardContent>
    </Card>
  );
}