import React from 'react';
import type { MessageBlock } from '@/store/commStore';
import { CheckSquare, Clock, User } from 'lucide-react';

interface TaskCardBlockProps {
  block: MessageBlock;
}

const TaskCardBlock: React.FC<TaskCardBlockProps> = ({ block }) => {
  const { title, assignee, due_date, priority, status, task_id } = block.block_data;
  const priorityColor = priority === 'high' ? 'text-danger-600' : priority === 'medium' ? 'text-warning-600' : 'text-secondary-500';
  return (
    <div className="border border-secondary-200 rounded-lg p-3 bg-white">
      <div className="flex items-center gap-2 mb-2">
        <CheckSquare className="w-4 h-4 text-primary-600" />
        <span className="text-sm font-medium text-secondary-900">{title || 'Task'}</span>
        {status && <span className="text-xs px-2 py-0.5 rounded-full bg-secondary-100 text-secondary-600 capitalize">{status}</span>}
      </div>
      <div className="flex items-center gap-3 text-xs text-secondary-500">
        {assignee && <span className="flex items-center gap-1"><User className="w-3 h-3" /> {assignee}</span>}
        {due_date && <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {due_date}</span>}
        {priority && <span className={priorityColor}>● {priority}</span>}
      </div>
      {task_id && <p className="text-xs text-secondary-400 mt-1">Task: {task_id.slice(0, 8)}</p>}
    </div>
  );
};
export default TaskCardBlock;