"use client";

import { useEffect, useState } from "react";

interface Certificate {
  id: string;
  code: string;
  issuedAt: string;
  filePath?: string;
  course: { title: string };
}

export default function AthleteCertificates() {
  const [certificates, setCertificates] = useState<Certificate[]>([]);

  useEffect(() => {
    fetch("/api/certificates", {
      headers: { Authorization: `Bearer ${localStorage.getItem("auth_token")}` },
    })
      .then((r) => r.json())
      .then(setCertificates)
      .catch(() => {});
  }, []);

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-6">گواهینامه‌ها</h1>
      <div className="rounded-xl border bg-white p-6">
        {certificates.length === 0 ? (
          <p className="text-center text-gray-500 py-8">گواهینامه‌ای صادر نشده است</p>
        ) : (
          <div className="space-y-4">
            {certificates.map((c) => (
              <div key={c.id} className="flex items-center justify-between p-4 rounded-lg bg-gray-50">
                <div>
                  <div className="font-medium text-gray-900">{c.course.title}</div>
                  <div className="text-xs text-gray-500">کد: {c.code}</div>
                  <div className="text-xs text-gray-500">
                    تاریخ: {new Date(c.issuedAt).toLocaleDateString("fa-IR")}
                  </div>
                </div>
                {c.filePath && (
                  <a
                    href={c.filePath}
                    download
                    className="text-sm text-[#2563EB] hover:underline"
                  >
                    دانلود
                  </a>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}