import { useInitials } from '@/hooks/use-initials';
import { User } from '@/types';
import { getImageUrl } from '@/utils/getImageUrl';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';

const AdminTableUser = ({
  user,
  link = true,
}: {
  user: User;
  link?: boolean;
}) => {
  const fullName = user?.name;
  const getInitials = useInitials();

  if (!link) {
    return (
      <div className="flex items-center gap-2">
        <Avatar className="size-8 overflow-hidden rounded-full">
          <AvatarImage
            src={getImageUrl(user?.profile?.profile_photo)}
            alt={fullName}
          />
          <AvatarFallback className="rounded-lg bg-neutral-200 font-medium text-black dark:bg-neutral-700 dark:text-white">
            {getInitials(fullName)}
          </AvatarFallback>
        </Avatar>
        <div>
          <p className="mb-1">{fullName}</p>
          <p className="text-black/50">{user?.email}</p>
        </div>
      </div>
    );
  }
  return (
    <a href={`/admin/users/${user?.id}`} className="flex items-center gap-2">
      <Avatar className="size-8 overflow-hidden rounded-full">
        <AvatarImage
          src={getImageUrl(user?.profile?.profile_photo)}
          alt={fullName}
        />
        <AvatarFallback className="rounded-lg bg-neutral-200 font-medium text-black dark:bg-neutral-700 dark:text-white">
          {getInitials(fullName)}
        </AvatarFallback>
      </Avatar>
      <div>
        <p className="mb-1">{fullName}</p>
        <p className="text-black/50">{user?.email}</p>
      </div>
    </a>
  );
};

export default AdminTableUser;