import { useKycDetails } from '../hooks/useApi';

// Define interfaces locally
interface KycRecord {
  name: string;
  kyc_status: string;
  kyc_type: string;
  creation: string;
  modified: string;
}

export default function KYCDetails() {
  const { data: kycData, loading, error } = useKycDetails();
  
  if (loading) {
    return (
      <div className="p-6 min-h-screen bg-gray-50 dark:bg-gray-900">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-indigo-600 mx-auto"></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-6 min-h-screen bg-gray-50 dark:bg-gray-900">
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-4">
          <div className="text-sm text-red-700 dark:text-red-400">Error: {error}</div>
        </div>
      </div>
    );
  }
  
  return (
    <div className="p-6 min-h-screen bg-gray-50 dark:bg-gray-900">
      <h1 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">KYC Details</h1>
      {kycData?.records?.map((item: KycRecord) => (
        <div key={item.name} className="p-3 border border-gray-300 dark:border-gray-700 rounded-xl mb-2 bg-white dark:bg-gray-800">
          <p className="text-gray-900 dark:text-white"><b>Type:</b> {item.kyc_type}</p>
          <p className="text-gray-900 dark:text-white"><b>Status:</b> {item.kyc_status}</p>
          <p className="text-gray-900 dark:text-white"><b>Created:</b> {new Date(item.creation).toLocaleDateString()}</p>
        </div>
      )) || (
        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
          No KYC records found
        </div>
      )}
    </div>
  );
}
