Skeleton

const shimmerClass = "animate-pulse bg-overlay/5 rounded";

export function DSSkeleton({
  variant = "text",
  lines = 3,
}: {
  variant?: "text" | "circle" | "card" | "chat";
  lines?: number;
}) {
  if (variant === "circle") {
    return <div className={`w-10 h-10 rounded-full ${shimmerClass}`} />;
  }

  if (variant === "card") {
    return (
      <div className="border border-overlay/10 rounded-xl bg-surface p-5 w-full max-w-xs">
        <div className={`h-4 w-24 mb-3 ${shimmerClass}`} />
        <div className={`h-3 w-full mb-2 ${shimmerClass}`} />
        <div className={`h-3 w-3/4 mb-4 ${shimmerClass}`} />
        <div className={`h-8 w-20 rounded-lg ${shimmerClass}`} />
      </div>
    );
  }

  if (variant === "chat") {
    return (
      <div className="flex gap-3 w-full">
        <div className={`w-8 h-8 rounded-full shrink-0 ${shimmerClass}`} />
        <div className="flex-1 max-w-xs">
          <div className="rounded-xl rounded-tl-sm p-4 bg-surface">
            <div className={`h-3 w-full mb-2 ${shimmerClass}`} />
            <div className={`h-3 w-4/5 mb-2 ${shimmerClass}`} />
            <div className={`h-3 w-2/3 ${shimmerClass}`} />
          </div>
          <div className={`h-2 w-16 mt-1.5 ${shimmerClass}`} />
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-2 w-full max-w-xs">
      {Array.from({ length: lines }).map((_, i) => (
        <div
          key={i}
          className={`h-3 ${shimmerClass}`}
          style={{ width: `${100 - i * 15}%` }}
        />
      ))}
    </div>
  );
}