'use client';
import { useAppSelector } from "@/store/hooks";

export default function UserInfoCard() {
  const user = useAppSelector((state) => state.auth.user);

  return (
    <>
      <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
        <div>
          <div className="relative grid max-w-4xl grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4 xl:gap-x-11 xl:gap-y-7">
            <div>
              <p className="mb-1.5 text-sm text-gray-500">
                First Name
              </p>
              <p className="text-base font-medium text-gray-800">
                {user?.firstName || user?.name?.split(' ')[0] || 'N/A'}
              </p>
            </div>

            <div>
              <p className="mb-1.5 text-sm text-gray-500">
                Last Name
              </p>
              <p className="text-base font-medium text-gray-800">
                {user?.lastName || user?.name?.split(' ')[1] || 'N/A'}
              </p>
            </div>
            <div className="hidden xl:block"></div>
            <div className="hidden xl:block"></div>
            <div>
              <p className="mb-1.5 text-sm text-gray-500">
                Email address
              </p>
              <p className="text-base font-medium text-gray-800">
                {user?.email || 'N/A'}
              </p>
            </div>

            <div>
              <p className="mb-1.5 text-sm text-gray-500">
                Phone
              </p>
              <p className="text-base font-medium text-gray-800">
                {user?.phone || 'N/A'}
              </p>
            </div>

            <div>
              <p className="mb-1.5 text-sm text-gray-500">
                Bio
              </p>
              <p className="text-base font-medium text-gray-800">
                {user?.role || 'N/A'}
              </p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}