import type { ReactNode } from "react"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { ProIndicator } from "@/components/pro/pro-indicator"

/** Optional settings stay discoverable without competing with the primary setup. */
export function SettingsSection({ id, title, description, summary, pro = false, children }: {
  id: string
  title: string
  description?: ReactNode
  summary: string
  pro?: boolean
  children: ReactNode
}) {
  return (
    <Card className="min-w-0 shadow-none">
      <Accordion type="single" collapsible>
        <AccordionItem value={id} className="border-0">
          <AccordionTrigger className="gap-4 rounded-xl px-6 py-5 hover:no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <span className="flex min-w-0 flex-1 flex-wrap items-center justify-between gap-3 text-left">
              <span className="min-w-0 space-y-1.5">
                <span className="flex items-center gap-2 font-semibold">{title}{pro && <><ProIndicator size="sm" /><span className="sr-only"> (Pro)</span></>}</span>
                {description && <span className="block text-sm font-normal text-muted-foreground">{description}</span>}
              </span>
              <Badge variant="secondary" className="max-w-full whitespace-normal text-left font-normal">{summary}</Badge>
            </span>
          </AccordionTrigger>
          <AccordionContent className="space-y-5 px-6 pb-6">{children}</AccordionContent>
        </AccordionItem>
      </Accordion>
    </Card>
  )
}