import { JSX } from "solid-js";

interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {
  width?: string;
  height?: string;
  circle?: boolean;
}

export function Skeleton(props: SkeletonProps) {
  const { width, height, circle, class: className, ...rest } = props;

  return (
    <div
      {...rest}
      class={[
        "animate-pulse bg-canvas-muted rounded-lg",
        circle ? "rounded-full" : "",
        className || "",
      ].join(" ")}
      style={{
        width: width || "100%",
        height: height || "1rem",
      }}
    />
  );
}

export function SkeletonCard() {
  return (
    <div class="p-6 rounded-card border border-border bg-canvas/50 space-y-4">
      <Skeleton width="60%" height="1.5rem" />
      <Skeleton width="100%" height="1rem" />
      <Skeleton width="80%" height="1rem" />
    </div>
  );
}

export function SkeletonText(props: { lines?: number }) {
  const lines = props.lines || 3;
  return (
    <div class="space-y-2">
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton
          width={i === lines - 1 ? "75%" : "100%"}
          height="1rem"
        />
      ))}
    </div>
  );
}