import React from "react";
import Image from "next/image";

interface ApplicantInfoCardProps {
  applicantName: string;
  applicationNo: string;
  submittedDate: string;
}

export default function ApplicantInfoCard({
  applicantName,
  applicationNo,
  submittedDate,
}: ApplicantInfoCardProps) {
  return (
    <div className="relative bg-white rounded-xl border border-gray-200 shadow-sm p-4">
      <div className="flex items-center justify-between gap-6">
        <div className="shrink-0 px-5">
          <Image
            className="dark:hidden relative top-0"
            src={`/logo.png`}
            alt="Logo"
            width={170}
            height={120}
          />
        </div>

        <div className="px-5">
          <h3 className="text-xl font-semibold text-gray-800 mb-4">
            Applicant Information
          </h3>
          <div className="space-y-2">
            <div className="flex">
              <span className="w-40 text-sm text-gray-600">Applicant's Name :</span>
              <span className="text-sm font-semibold text-gray-900">{applicantName}</span>
            </div>
            <div className="flex">
              <span className="w-40 text-sm text-gray-600">Applicant's No :</span>
              <span className="text-sm font-semibold text-gray-900">{applicationNo}</span>
            </div>
            <div className="flex">
              <span className="w-40 text-sm text-gray-600">Submitted :</span>
              <span className="text-sm font-semibold text-gray-900">{submittedDate}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}