import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonSection() {
  return (
    <section id="skeleton" className="mb-12">
      <SectionHeading title="Skeleton" description="Used to show a placeholder while content is loading." />

      <ComponentContainer
        title="Basic Skeleton"
        description="Simple skeleton loaders for text content."
        code={`<div className="space-y-2">
  <Skeleton className="h-4 w-[250px]" />
  <Skeleton className="h-4 w-[200px]" />
  <Skeleton className="h-4 w-[300px]" />
</div>`}
      >
        <div className="space-y-2">
          <Skeleton className="h-4 w-[250px]" />
          <Skeleton className="h-4 w-[200px]" />
          <Skeleton className="h-4 w-[300px]" />
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Avatar with Text Skeleton"
        description="Skeleton for a user card with avatar and text."
        code={`<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>`}
      >
        <div className="flex items-center space-x-4">
          <Skeleton className="h-12 w-12 rounded-full" />
          <div className="space-y-2">
            <Skeleton className="h-4 w-[250px]" />
            <Skeleton className="h-4 w-[200px]" />
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Card Skeleton"
        description="Skeleton for a card with image and text content."
        code={`<div className="flex flex-col space-y-3">
  <Skeleton className="h-[125px] w-[250px] rounded-xl" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>`}
      >
        <div className="flex flex-col space-y-3">
          <Skeleton className="h-[125px] w-[250px] rounded-xl" />
          <div className="space-y-2">
            <Skeleton className="h-4 w-[250px]" />
            <Skeleton className="h-4 w-[200px]" />
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Content Skeleton"
        description="Skeleton for a complete content section with heading, text, and buttons."
        code={`<div className="space-y-3">
  <Skeleton className="h-8 w-[300px]" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-[250px]" />
  <div className="flex gap-2 pt-2">
    <Skeleton className="h-8 w-20" />
    <Skeleton className="h-8 w-20" />
  </div>
</div>`}
      >
        <div className="space-y-3">
          <Skeleton className="h-8 w-[300px]" />
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-[250px]" />
          <div className="flex gap-2 pt-2">
            <Skeleton className="h-8 w-20" />
            <Skeleton className="h-8 w-20" />
          </div>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Image Grid Skeleton"
        description="Skeleton for a grid of images."
        code={`<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
  <Skeleton className="h-40 w-full rounded-md" />
  <Skeleton className="h-40 w-full rounded-md" />
  <Skeleton className="h-40 w-full rounded-md" />
</div>`}
      >
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Skeleton className="h-40 w-full rounded-md" />
          <Skeleton className="h-40 w-full rounded-md" />
          <Skeleton className="h-40 w-full rounded-md" />
        </div>
      </ComponentContainer>
    </section>
  )
}