HeroUI Accordion

import { Accordion } from "@/components/ui/heroui-accordion"
import { ShoppingBag, Receipt, CreditCard, Box, Globe, RotateCcw, ChevronDown } from "lucide-react"

const items = [
  { icon: <ShoppingBag className="size-4" />, title: "How do I place an order?", content: "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase." },
  { icon: <Receipt className="size-4" />, title: "Can I modify or cancel my order?", content: "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes." },
  { icon: <CreditCard className="size-4" />, title: "What payment methods do you accept?", content: "We accept all major credit cards, including Visa, Mastercard, and American Express." },
  { icon: <Box className="size-4" />, title: "How much does shipping cost?", content: "Shipping costs vary based on your location and the size of your order. We offer free shipping for orders over $50." },
  { icon: <Globe className="size-4" />, title: "Do you ship internationally?", content: "Yes, we ship to most countries. Please check our shipping rates and policies for more information." },
  { icon: <RotateCcw className="size-4" />, title: "How do I request a refund?", content: "If you're not satisfied with your purchase, you can request a refund within 30 days of purchase. Please contact our customer support team for assistance." },
]

export default function Surface() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-8">
      <Accordion variant="surface" className="w-full max-w-md">
        {items.map((item, i) => (
          <Accordion.Item key={i}>
            <Accordion.Heading>
              <Accordion.Trigger>
                <span className="mr-3 flex size-4 shrink-0 items-center justify-center text-muted [&>svg]:size-4">{item.icon}</span>
                {item.title}
                <Accordion.Indicator className="[&>svg]:size-4">
                  <ChevronDown className="size-4" />
                </Accordion.Indicator>
              </Accordion.Trigger>
            </Accordion.Heading>
            <Accordion.Panel>
              <Accordion.Body>{item.content}</Accordion.Body>
            </Accordion.Panel>
          </Accordion.Item>
        ))}
      </Accordion>
    </div>
  )
}