"use client"

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { cn } from "@/lib/utils"

interface AccordionSectionProps {
  className?: string
  minimal?: boolean
}

export function AccordionSection({ className, minimal = false }: AccordionSectionProps) {
  if (minimal) {
    return (
      <div className={cn("space-y-4", className)}>
        <h3 className="text-xl font-medium mb-2 text-foreground">Accordion</h3>
        <Accordion type="single" collapsible className="w-full">
          <AccordionItem value="item-1">
            <AccordionTrigger>Is it accessible?</AccordionTrigger>
            <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    )
  }

  return (
    <section id="accordion" className={cn("space-y-8", className)}>
      <SectionHeading
        title="Accordion"
        description="A vertically stacked set of interactive headings that each reveal a section of content."
      />

      <div className="space-y-6">
        <ComponentContainer
          title="Basic Accordion"
          description="A collapsible accordion component that reveals content when clicked."
          code={`import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that matches your theme.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. It's animated by default, but you can disable it if you prefer.
    </AccordionContent>
  </AccordionItem>
</Accordion>`}
        >
          <div className="w-full py-2">
            <Accordion type="single" collapsible className="w-full">
              <AccordionItem value="item-1">
                <AccordionTrigger>Is it accessible?</AccordionTrigger>
                <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-2">
                <AccordionTrigger>Is it styled?</AccordionTrigger>
                <AccordionContent>Yes. It comes with default styles that matches your theme.</AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-3">
                <AccordionTrigger>Is it animated?</AccordionTrigger>
                <AccordionContent>
                  Yes. It's animated by default, but you can disable it if you prefer.
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Multiple Items"
          description="Allow multiple items to be open at the same time."
          code={`<Accordion type="multiple" className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
    <AccordionContent>
      Yes. Set the type to "multiple" to allow multiple items to be open at once.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it keyboard accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. You can navigate through items using arrow keys and toggle with Enter or Space.
    </AccordionContent>
  </AccordionItem>
</Accordion>`}
        >
          <div className="w-full py-2">
            <Accordion type="multiple" className="w-full">
              <AccordionItem value="item-1">
                <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
                <AccordionContent>
                  Yes. Set the type to "multiple" to allow multiple items to be open at once.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-2">
                <AccordionTrigger>Is it keyboard accessible?</AccordionTrigger>
                <AccordionContent>
                  Yes. You can navigate through items using arrow keys and toggle with Enter or Space.
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
        </ComponentContainer>
      </div>

      <div className="space-y-3">
        <h2 className="text-xl font-medium">Usage</h2>
        <div className="rounded-md border p-4">
          <pre className="text-sm text-muted-foreground overflow-x-auto whitespace-pre-wrap break-words">
            <code>{`import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"`}</code>
          </pre>
        </div>
      </div>
    </section>
  )
}