import { useState, useEffect } from 'react';

interface Certificate {
  certificate: string;
  name: string;
  value: string;
  validUses: number;
  usesRemaining: number;
  expirationDate: string | null;
}

export default function CertificateViewer() {
  const [certificates, setCertificates] = useState<Certificate[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const mockCertificates: Certificate[] = [
      { certificate: 'GIFT100', name: 'John Doe', value: '$100.00', validUses: 1, usesRemaining: 1, expirationDate: '2024-12-31' },
      { certificate: 'VIP50', name: 'Jane Smith', value: '$50.00', validUses: 2, usesRemaining: 1, expirationDate: null },
    ];
    setCertificates(mockCertificates);
    setLoading(false);
  }, []);

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-blue-400">Gift Certificates</h1>
          <button className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium">
            + New Certificate
          </button>
        </div>

        {loading ? (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400 mx-auto"></div>
          </div>
        ) : (
          <div className="grid gap-4">
            {certificates.map((cert) => (
              <div key={cert.certificate} className="bg-gray-800 rounded-lg p-6">
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="text-xl font-semibold mb-2">Code: {cert.certificate}</h3>
                    <p className="text-gray-400 mb-1">Holder: {cert.name}</p>
                    <p className="text-lg font-semibold text-green-400 mb-2">Value: {cert.value}</p>
                    <div className="flex gap-4 text-sm text-gray-400">
                      <span>Valid Uses: {cert.validUses}</span>
                      <span>Remaining: {cert.usesRemaining}</span>
                      {cert.expirationDate && <span>Expires: {cert.expirationDate}</span>}
                    </div>
                  </div>
                  <div className="space-x-2">
                    <button className="text-blue-400 hover:text-blue-300">Edit</button>
                    <button className="text-red-400 hover:text-red-300">Delete</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
