"use client";

import { Skeleton } from "@/components/ui/skeleton";

export function ChatListItemSkeleton() {
  return (
    <div className="mb-3 flex w-full items-center gap-3 rounded-2xl p-3">
      <Skeleton className="h-14 w-14 shrink-0 rounded-full" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-4 w-2/5 rounded-lg" />
        <Skeleton className="h-3 w-1/3 rounded-lg" />
      </div>
      <Skeleton className="h-3 w-10 rounded-lg" />
    </div>
  );
}

export function ChatListSkeleton({ count = 6 }: { count?: number }) {
  return (
    <div className="mt-4 space-y-1">
      {Array.from({ length: count }).map((_, i) => (
        <ChatListItemSkeleton key={i} />
      ))}
    </div>
  );
}

export function MessageBubbleSkeleton({
  align = "left",
}: {
  align?: "left" | "right";
}) {
  const isRight = align === "right";
  return (
    <div
      className={`my-2 flex w-full ${isRight ? "justify-end" : "justify-start"}`}
    >
      <Skeleton
        className={`h-10 rounded-2xl ${isRight ? "w-48 rounded-br-md" : "w-56 rounded-bl-md"}`}
      />
    </div>
  );
}

export function ChatMessagesSkeleton() {
  return (
    <div className="flex flex-col gap-1 px-2 py-4">
      <MessageBubbleSkeleton align="left" />
      <MessageBubbleSkeleton align="right" />
      <MessageBubbleSkeleton align="left" />
      <Skeleton className="my-2 h-36 w-44 rounded-2xl" />
      <MessageBubbleSkeleton align="right" />
      <MessageBubbleSkeleton align="left" />
      <MessageBubbleSkeleton align="right" />
    </div>
  );
}
