Text skeletons

"use client"

import type * as React from "react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Text skeleton family: 5 text-line layouts. The difference is not in the ANIMATION but in the STRUCTURE - the line count, the line height and realistic varying widths. The widths are picked by index from a FIXED list (NO Math.random, deterministic SSR). Colour comes ONLY from tokens. Skeletons are decorative: the root is aria-hidden. The pulse stops under reduced motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

type Props = React.ComponentProps<"div"> & { size?: StyledSize }

/* Shared calm pulse (framer-motion, NO keyframes). */
function Block({ className, delay = 0 }: { className?: string; delay?: number }) {
  const reduce = useReducedMotion()
  return (
    <motion.span
      className={cn("block rounded-md bg-secondary", className)}
      animate={reduce ? undefined : { opacity: [0.5, 1, 0.5] }}
      transition={
        reduce ? undefined : { duration: 1.6, ease: "easeInOut", repeat: Infinity, delay }
      }
    />
  )
}

/* Govde satiri yuksekligi. */
const line: Record<StyledSize, string> = {
  sm: "h-2.5",
  md: "h-3",
  lg: "h-3.5",
  xl: "h-4",
}

/* Baslik cubugu yuksekligi. */
const head: Record<StyledSize, string> = {
  sm: "h-4",
  md: "h-5",
  lg: "h-6",
  xl: "h-8",
}

const gap: Record<StyledSize, string> = {
  sm: "gap-2",
  md: "gap-2.5",
  lg: "gap-3",
  xl: "gap-3.5",
}

/* A realistic paragraph rhythm: a fixed width cycle with a short last line. */
const widths = ["w-full", "w-11/12", "w-full", "w-10/12", "w-11/12", "w-9/12"]

const root = "flex w-full flex-col"

/* Line: tek metin satiri. */
export function LineSkeleton({ className, size = "md", ...props }: Props) {
  return (
    <div
      data-slot="styled-skeleton"
      aria-hidden="true"
      className={cn(root, className)}
      {...props}
    >
      <Block className={cn("w-full", line[size])} />
    </div>
  )
}

/* Paragraph: an n-line block whose last line is cut short. */
export function ParagraphSkeleton({
  className,
  size = "md",
  lines = 4,
  ...props
}: Props & { lines?: number }) {
  return (
    <div
      data-slot="styled-skeleton"
      aria-hidden="true"
      className={cn(root, gap[size], className)}
      {...props}
    >
      {Array.from({ length: lines }, (_, i) => (
        <Block
          key={i}
          delay={i * 0.12}
          className={cn(line[size], i === lines - 1 ? "w-3/5" : widths[i % widths.length])}
        />
      ))}
    </div>
  )
}

/* Heading: kalin baslik cubugu + altinda tek destek satiri. */
export function HeadingSkeleton({ className, size = "md", ...props }: Props) {
  return (
    <div
      data-slot="styled-skeleton"
      aria-hidden="true"
      className={cn(root, gap[size], className)}
      {...props}
    >
      <Block className={cn("w-2/3 rounded-lg", head[size])} />
      <Block className={cn("w-2/5", line[size])} delay={0.12} />
    </div>
  )
}

/* Mixed: baslik + paragraf + kisa alt not, tek blokta gercekci makale ritmi. */
export function MixedSkeleton({ className, size = "md", ...props }: Props) {
  return (
    <div
      data-slot="styled-skeleton"
      aria-hidden="true"
      className={cn(root, gap[size], className)}
      {...props}
    >
      <Block className={cn("w-1/2 rounded-lg", head[size])} />
      {widths.slice(0, 3).map((w, i) => (
        <Block key={w} delay={(i + 1) * 0.12} className={cn(w, line[size])} />
      ))}
      <Block className={cn("w-1/4", line[size])} delay={0.48} />
    </div>
  )
}

/* Caption: tek kisa alt yazi satiri (yari opak, ikincil metin gibi). */
export function CaptionSkeleton({ className, size = "md", ...props }: Props) {
  return (
    <div
      data-slot="styled-skeleton"
      aria-hidden="true"
      className={cn(root, className)}
      {...props}
    >
      <Block
        className={cn(
          "w-2/5 bg-[color-mix(in_oklab,var(--color-secondary)_70%,transparent)]",
          line[size]
        )}
      />
    </div>
  )
}