import type { User } from "@/types/auth";

interface UserAccountCardProps {
  readonly user: User;
}

export default function UserAccountCard({ user }: UserAccountCardProps) {
  return (
    <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
      <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">
        Account Information
      </h4>

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-7">
        <div>
          <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">Email Address</p>
          <p className="text-sm font-medium text-gray-800 dark:text-white/90">{user.email}</p>
        </div>

        <div>
          <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">Phone Number</p>
          <p className="text-sm font-medium text-gray-800 dark:text-white/90">{user.phone}</p>
        </div>
      </div>
    </div>
  );
}