'use client';

import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Clock, User } from 'lucide-react';
import type { TaskCard as TaskCardType } from '@/types/kanban';

interface TaskCardProps {
  task: TaskCardType;
  isDragging?: boolean;
}

export function TaskCard({ task, isDragging = false }: TaskCardProps) {
  const priorityColors = {
    Low: 'bg-blue-100 text-blue-700',
    Medium: 'bg-yellow-100 text-yellow-700',
    High: 'bg-orange-100 text-orange-700',
    Urgent: 'bg-red-100 text-red-700',
  };

  return (
    <Card
      className={`cursor-move transition-shadow hover:shadow-md ${
        isDragging ? 'opacity-50 shadow-lg' : ''
      }`}
    >
      <CardHeader className="p-4 pb-2">
        <div className="flex items-start justify-between gap-2">
          <h4 className="text-sm font-medium leading-tight">{task.title}</h4>
          <span
            className={`rounded-full px-2 py-0.5 text-xs font-medium ${
              priorityColors[task.priority as keyof typeof priorityColors] ||
              priorityColors.Medium
            }`}
          >
            {task.priority}
          </span>
        </div>
      </CardHeader>
      <CardContent className="p-4 pt-0">
        {task.description && (
          <p className="mb-3 line-clamp-2 text-xs text-muted-foreground">
            {task.description}
          </p>
        )}
        <div className="flex items-center gap-4 text-xs text-muted-foreground">
          {task.estimatedHours && (
            <div className="flex items-center gap-1">
              <Clock className="h-3 w-3" />
              <span>{task.estimatedHours}h</span>
            </div>
          )}
          {task.assigneeId && (
            <div className="flex items-center gap-1">
              <User className="h-3 w-3" />
              <span>Assigned</span>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}