'use client';

import { WorkItem, WorkItemStatus } from '@/lib/types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck } from '@fortawesome/free-solid-svg-icons';

interface WorkItemCardProps {
  item: WorkItem;
  showCheckbox?: boolean;
  onToggle?: (id: number) => void;
  selected?: boolean;
}

export default function WorkItemCard({ 
  item, 
  showCheckbox = false, 
  onToggle, 
  selected = false 
}: WorkItemCardProps) {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-200">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-3">
          {showCheckbox && (
            <button
              onClick={() => onToggle?.(item.id)}
              className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors duration-200 ${
                selected
                  ? 'bg-blue-500 border-blue-500 text-white'
                  : 'border-gray-300 hover:border-blue-400'
              }`}
            >
              {selected && <FontAwesomeIcon icon={faCheck} className="h-3 w-3" />}
            </button>
          )}
          <div>
            <h3 className="text-sm font-medium text-gray-900">{item.title}</h3>
          </div>
        </div>
        <span className={`px-2 py-1 text-xs font-medium rounded-full ${
          item.status === WorkItemStatus.Pending 
            ? 'bg-yellow-100 text-yellow-800'
            : item.status === WorkItemStatus.InProgress
            ? 'bg-blue-100 text-blue-800'
            : 'bg-green-100 text-green-800'
        }`}>
          {item.status === WorkItemStatus.Pending ? 'Pending' : 
           item.status === WorkItemStatus.InProgress ? 'In Progress' : 'Completed'}
        </span>
      </div>
    </div>
  );
}