import React, { useEffect } from "react";
import { useAuth } from "../../context/Auth";

function GraduationDetailsCard({ user }: any) {
  return (
    <>
      <div className="flex flex-col lg:block  p-6 bg-white border border-gray-200 rounded-lg shadow-md lg:w-full">
        <h5
          className="mb-2 text-xl  tracking-tight  underline"
          style={{ color: "#e51937" }}
        >
          Graduation Details
        </h5>
        <p className="font-normal text-gray-700 ">
          Graduation Date:{" "}
          <i className="font-bold">{user.ceremony.date_formatted}</i>
        </p>
        <p className="font-normal text-gray-700 ">
          Ceremony Time: <i className="font-bold">{user.ceremony.time}</i>
        </p>
        <p className="font-normal text-gray-700 ">
          Course Name: <i className="font-bold">{user.course.course_name}</i>
        </p>

        <p className="font-normal text-gray-700 ">
          Venue:
          <i className="font-bold">{user.ceremony.venue}</i>
        </p>
      </div>
    </>
  );
}

export default GraduationDetailsCard;