import { Skeleton, SkeletonGroup, SkeletonAvatar, SkeletonText, SkeletonProvider } from "skelcraft";
import "skelcraft/styles.css";

export function ProfileSkeleton() {
  return (
    <SkeletonProvider
      theme="dark"
      animation="shimmer"
      duration="1.5s"
      radius={8}
      baseColor="#19122A"
      shineColor="#2B2140"
    >
      <SkeletonGroup direction="row" gap={16} align="center" padding={20}>
        <SkeletonAvatar size={56} shape="circle" />
        <SkeletonGroup direction="column" gap={6} flex={1}>
          <Skeleton width="60%" height={16} radius={8} />
          <SkeletonText lines={2} gap={6} height={12} lastLineWidth="40%" />
        </SkeletonGroup>
      </SkeletonGroup>
    </SkeletonProvider>
  );
}