import { Mail } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { useUserInfo } from '@/hooks/data/useUserInfo';

export function MainProfile() {
  const { data: user } = useUserInfo();
  return (
    <div className="flex flex-col w-full">
      <div className="flex w-full flex-row gap-4 mt-2">
        <Avatar className="size-16 rounded-full border-2 border-muted">
          <AvatarImage src={user.avatar} alt={user.nickname} />
          <AvatarFallback className="rounded-lg">CN</AvatarFallback>
        </Avatar>
        <div className="flex flex-1 flex-col justify-center">
          <span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
          <span className="text-[20px] text-muted-foreground" aria-hidden="true">{user.subtitle}</span>
        </div>
      </div>
      <Button className="w-full mt-4" variant="outline" size="lg">
        编辑个人资料
      </Button>
      <section className="px-2 mt-4">
        <div className="flex flex-row gap-2 items-center text-sm">
          <Mail className="h-4 w-4 stroke-muted-foreground" />
          {user.email}
        </div>
      </section>
      <section className="rounded-md border border-muted w-full min-h-72 mt-4">
        {/* Bio */}
      </section>
    </div>
  );
}