import React from 'react';
import { Card } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Task } from '../types';
import { MessageSquare, Clock } from 'lucide-react';

interface TaskCardProps {
  task: Task;
  onEdit: (task: Task) => void;
  onComment: (task: Task) => void;
}

export const TaskCard: React.FC<TaskCardProps> = ({ task, onEdit, onComment }) => {
  return (
    <Card 
      className="p-3 cursor-pointer hover:shadow-md transition-shadow bg-white"
      onDoubleClick={() => onEdit(task)}
    >
      <div className="space-y-2">
        <div className="flex items-start justify-between gap-2">
          <h4 className="flex-1">{task.title}</h4>
          {task.timeComplexity && (
            <Badge variant="secondary" className="flex items-center gap-1 shrink-0">
              <Clock className="h-3 w-3" />
              {task.timeComplexity}
            </Badge>
          )}
        </div>
        {task.description && (
          <p className="text-sm text-muted-foreground line-clamp-2">
            {task.description}
          </p>
        )}
        <div className="flex items-center justify-between pt-1">
          <Button
            variant="ghost"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              onComment(task);
            }}
            className="h-8 px-2"
          >
            <MessageSquare className="h-4 w-4 mr-1" />
            {task.comments.length > 0 && (
              <span className="text-sm">{task.comments.length}</span>
            )}
          </Button>
        </div>
      </div>
    </Card>
  );
};