Profile Card

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
  Button,
  Card,
  CardContent,
} from "@cooud-ui/ui";

const FOLLOWED_BY_AVATARS = [
  { src: "https://i.pravatar.cc/80?img=32", alt: "Diego Lima", fallback: "DL" },
  { src: "https://i.pravatar.cc/80?img=47", alt: "Priya Raman", fallback: "PR" },
  { src: "https://i.pravatar.cc/80?img=15", alt: "Sara Tavares", fallback: "ST" },
];

export function ProfileCardBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-sm gap-0 overflow-hidden p-0 shadow-lg">
        <div className="h-24 bg-gradient-primary" aria-hidden="true" />
        <CardContent className="flex flex-col gap-4 pb-6">
          <div className="flex items-start justify-between">
            <Avatar className="-mt-10 size-20 border-4 border-surface-raised">
              <AvatarImage src="https://i.pravatar.cc/160?img=12" alt="Mara Castillo" />
              <AvatarFallback className="bg-surface-overlay text-base text-fg-secondary">
                MC
              </AvatarFallback>
            </Avatar>
            <Button variant="gradient" size="sm" className="mt-3">
              Follow
            </Button>
          </div>

          <div className="flex flex-col gap-1">
            <span className="font-display text-lg font-semibold text-fg">Mara Castillo</span>
            <span className="text-sm text-fg-tertiary">@maracastillo</span>
            <p className="mt-1 text-sm leading-6 text-fg-secondary">
              Design systems lead at Cooud. Building accessible, themeable interfaces.
            </p>
          </div>

          <div className="flex items-center gap-6">
            <div className="flex flex-col">
              <span className="text-sm font-semibold text-fg">182</span>
              <span className="text-xs text-fg-tertiary">Posts</span>
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-semibold text-fg">12.4k</span>
              <span className="text-xs text-fg-tertiary">Followers</span>
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-semibold text-fg">340</span>
              <span className="text-xs text-fg-tertiary">Following</span>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <AvatarGroup
              avatars={FOLLOWED_BY_AVATARS}
              size="sm"
              aria-label="Followed by Diego, Priya, and Sara"
            />
            <p className="text-xs text-fg-tertiary">Followed by Diego, Priya, and 18 others</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}