import React from 'react';

interface Task {
  id: string;
  title: string;
  status: string;
  importance: string;
  responsibleIds?: string[];
  dates?: {
    due?: string;
  };
}

interface TaskCardProps {
  task: Task;
  onClick?: () => void;
}

export function TaskCard({ task, onClick }: TaskCardProps) {
  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case 'completed':
        return 'badge-success';
      case 'active':
        return 'badge-info';
      case 'deferred':
        return 'badge-warning';
      default:
        return 'badge-secondary';
    }
  };

  const getImportanceColor = (importance: string) => {
    switch (importance) {
      case 'High':
        return 'badge-danger';
      case 'Normal':
        return 'badge-info';
      case 'Low':
        return 'badge-secondary';
      default:
        return 'badge-info';
    }
  };

  return (
    <div className="card" onClick={onClick} style={{ cursor: onClick ? 'pointer' : 'default' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <h3 style={{ margin: '0 0 8px 0', fontSize: '16px' }}>{task.title}</h3>
        <span className={`badge ${getImportanceColor(task.importance)}`}>
          {task.importance}
        </span>
      </div>
      <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
        <span className={`badge ${getStatusColor(task.status)}`}>{task.status}</span>
        {task.dates?.due && (
          <span className="badge" style={{ background: 'var(--bg-tertiary)' }}>
            Due: {new Date(task.dates.due).toLocaleDateString()}
          </span>
        )}
      </div>
    </div>
  );
}
