'use client';

import Link from 'next/link';
import type { Exam } from '../../types';
import { formatDate } from '../../lib/utils';

interface ExamListProps {
  exams: Exam[];
  onDelete: (id: string) => void;
}

export default function ExamList({ exams, onDelete }: ExamListProps) {
  if (exams.length === 0) {
    return (
      <div className="text-center py-16">
        <div className="text-6xl mb-4">📋</div>
        <p className="text-gray-600 text-lg mb-4">هنوز آزمونی ایجاد نشده است</p>
        <Link href="/admin/exams/new" className="btn-primary">
          ایجاد اولین آزمون
        </Link>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {exams.map((exam) => (
        <div key={exam.id} className="card hover:shadow-md transition-shadow">
          <div className="flex flex-col h-full">
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-gray-900 mb-2">
                {exam.title}
              </h3>
              {exam.description && (
                <p className="text-gray-600 text-sm mb-4 line-clamp-2">
                  {exam.description}
                </p>
              )}
              <div className="flex items-center gap-4 text-sm text-gray-500 mb-4">
                <span>📝 {exam.questions?.length || 0} سوال</span>
                <span>🕐 {formatDate(exam.createdAt)}</span>
              </div>
            </div>

            <div className="flex gap-2 pt-4 border-t border-gray-100">
              <Link
                href={`/admin/exams/${exam.id}/edit`}
                className="btn-secondary flex-1 text-sm py-2"
              >
                ویرایش
              </Link>
              <Link
                href={`/exam/${exam.slug}`}
                target="_blank"
                className="btn-secondary flex-1 text-sm py-2"
              >
                مشاهده
              </Link>
              <button
                onClick={() => onDelete(exam.id)}
                className="btn-danger text-sm py-2 px-3"
              >
                حذف
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}