'use client';

import { formatCurrency, formatTimeRemaining } from '@/lib/utils';
import { Task, TaskType } from '@/types';
import Link from 'next/link';

interface TaskCardProps {
  task: Task;
}

export function TaskCard({ task }: TaskCardProps) {
  const taskTypeLabels: Record<TaskType, string> = {
    [TaskType.TEXT_VERIFICATION]: 'Text',
    [TaskType.IMAGE_LABELING]: 'Image',
    [TaskType.SURVEY]: 'Survey',
    [TaskType.CONTENT_MODERATION]: 'Moderation',
  };

  return (
    <Link href={`/tasks/${task.id}`}>
      <div className="bg-white border-2 border-gray-200 hover:border-primary transition-colors p-6 cursor-pointer">
        {/* Header */}
        <div className="flex items-start justify-between mb-3">
          <h3 className="text-base font-bold text-gray-900 line-clamp-2">
            {task.title}
          </h3>
          {task.paymentAmount >= 5 && (
            <span className="text-xs bg-primary text-white px-2 py-1 font-semibold ml-2 flex-shrink-0">
              HIGH
            </span>
          )}
        </div>

        {/* Description */}
        <p className="text-sm text-gray-600 mb-4 line-clamp-2 leading-relaxed">{task.description}</p>

        {/* Stats Grid */}
        <div className="grid grid-cols-2 gap-4 mb-4 pb-4 border-b border-gray-200">
          <div>
            <div className="text-xs text-gray-500 mb-1">Payment</div>
            <div className="font-bold text-primary text-base">
              {formatCurrency(task.paymentAmount)}
            </div>
          </div>
          <div>
            <div className="text-xs text-gray-500 mb-1">Available</div>
            <div className="font-semibold text-gray-900 text-base">
              {task.spotsRemaining}/{task.maxSubmissions}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between">
          <span className="text-xs px-2 py-1 bg-gray-100 text-gray-700 border border-gray-200 font-medium">
            {taskTypeLabels[task.taskType]}
          </span>
          <span className="text-xs text-gray-500 font-medium">
            {formatTimeRemaining(task.expiresAt)}
          </span>
        </div>
      </div>
    </Link>
  );
}