"use client"

import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"

export function LabelSection() {
  return (
    <section id="label" className="scroll-mt-16">
      <SectionHeading title="Label" description="Renders an accessible label associated with controls." />

      <div className="space-y-8">
        <ComponentContainer
          title="Basic Label"
          description="A simple label for form elements."
          code={`import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>`}
        >
          <div className="flex items-center justify-center p-8">
            <div className="grid w-full max-w-sm items-center gap-1.5">
              <Label htmlFor="email">Email</Label>
              <Input type="email" id="email" placeholder="Email" />
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Label with Checkbox"
          description="A label associated with a checkbox."
          code={`import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>`}
        >
          <div className="flex items-center justify-center p-8">
            <div className="flex items-center space-x-2">
              <Checkbox id="terms" />
              <Label htmlFor="terms">Accept terms and conditions</Label>
            </div>
          </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 { Label } from "@/components/ui/label"`}</code>
          </pre>
        </div>
      </div>
    </section>
  )
}