"use client"

import React from "react"

import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)

export function ScrollAreaSection() {
  return (
    <section id="scroll-area" className="scroll-mt-16">
      <SectionHeading
        title="Scroll Area"
        description="Augments native scroll functionality for custom, cross-browser styling."
      />

      <div className="space-y-8">
        <ComponentContainer
          title="Basic Scroll Area"
          description="A scrollable area with custom styling."
          code={`import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => \`v1.2.0-beta.\${a.length - i}\`
)

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
    {tags.map((tag) => (
      <>
        <div key={tag} className="text-sm">
          {tag}
        </div>
        <Separator className="my-2" />
      </>
    ))}
  </div>
</ScrollArea>`}
        >
          <div className="flex items-center justify-center p-8">
            <ScrollArea className="h-72 w-48 rounded-md border">
              <div className="p-4">
                <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
                {tags.map((tag) => (
                  <React.Fragment key={tag}>
                    <div className="text-sm">{tag}</div>
                    <Separator className="my-2" />
                  </React.Fragment>
                ))}
              </div>
            </ScrollArea>
          </div>
        </ComponentContainer>
      </div>

      <div className="space-y-4 mt-8">
        <h3 className="text-xl font-medium">Usage</h3>
        <div className="rounded-md border p-4">
          <pre className="text-sm text-muted-foreground overflow-x-auto whitespace-pre-wrap break-words">
            <code>{`import { ScrollArea } from "@/components/ui/scroll-area"`}</code>
          </pre>
        </div>
      </div>
    </section>
  )
}