import { FC } from "react";
import { SkeletonProps } from "./types";

export const Skeleton: FC<SkeletonProps> = ({ className = "", count = 1 }) => {
  return (
    <div className="animate-pulse space-y-4">
      {Array.from({ length: count }).map((_, index) => (
        <div
          key={index}
          className={`h-8 rounded bg-skeleton-bg-start ${className}`}
          style={{ opacity: 1 - index * 0.1 }}
        />
      ))}
    </div>
  );
};

Skeleton.displayName = "Skeleton";

export type { SkeletonProps };

export const PageSkeleton: FC = () => {
  return (
    <div
      className="item-center mx-auto mt-4 flex animate-pulse flex-col justify-center gap-10 px-1 md:max-w-[48.375rem] md:gap-16 md:px-0"
      data-testid="generic-skeleton"
    >
      {/* Title */}
      <div
        className="h-12 w-full rounded-lg bg-skeleton-bg-start"
        data-testid="title"
      />

      {/* Subtitle */}
      <div className="item-center flex flex-col gap-6" data-testid="subtitle">
        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
        <div className="h-5 w-full rounded-lg bg-skeleton-bg-start" />
      </div>

      {/* Content */}
      <div className="item-center flex flex-col gap-3" data-testid="content">
        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
        <div className="h-12 w-full rounded-lg bg-skeleton-bg-start" />
      </div>

      {/* Additional Information */}
      <div
        className="item-center flex flex-col gap-6"
        data-testid="additional-info"
      >
        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
        <div className="h-5 w-full rounded-lg bg-skeleton-bg-end" />
      </div>

      {/* CTA button */}
      <div className="item-center flex justify-center" data-testid="cta-button">
        <div className="h-12 w-full rounded-lg bg-skeleton-bg-end md:w-[22.125rem]" />
      </div>
    </div>
  );
};