'use client'

import type { ReactNode } from 'react'
import * as Accordion from '@radix-ui/react-accordion'
import { ChevronDown } from 'lucide-react'

export function SeoAccordion({
  children,
  defaultOpen = ['focus-keyword', 'search-appearance'],
}: {
  children: ReactNode
  defaultOpen?: string[]
}) {
  return (
    <Accordion.Root
      type="multiple"
      defaultValue={defaultOpen}
      className="divide-y divide-[var(--bdr)]"
    >
      {children}
    </Accordion.Root>
  )
}

export function SeoAccordionItem({
  value,
  title,
  badge,
  children,
}: {
  value: string
  title: string
  badge?: ReactNode
  children: ReactNode
}) {
  return (
    <Accordion.Item value={value} className="border-[var(--bdr)] bg-[var(--sb)]">
      <Accordion.Header>
        <Accordion.Trigger className="group flex w-full items-center justify-between gap-2 px-5 py-3.5 text-left transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none">
          <span className="flex min-w-0 items-center gap-2">
            <span className="text-[13px] font-medium text-[var(--txt)]">{title}</span>
            {badge}
          </span>
          <ChevronDown
            size={16}
            aria-hidden
            className="shrink-0 text-[var(--muted)] group-data-[state=open]:rotate-180 motion-safe:transition-transform motion-safe:duration-200"
          />
        </Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content className="overflow-hidden data-[state=closed]:hidden">
        <div className="space-y-3 px-5 pt-1 pb-4">{children}</div>
      </Accordion.Content>
    </Accordion.Item>
  )
}

export function SeoAccordionBadge({
  tone,
  children,
}: {
  tone: 'neutral' | 'good' | 'warn' | 'bad'
  children: ReactNode
}) {
  const cls =
    tone === 'good'
      ? 'bg-[var(--suc-l)] text-[var(--suc)]'
      : tone === 'warn'
        ? 'bg-[var(--warn-l)] text-[var(--warn)]'
        : tone === 'bad'
          ? 'bg-[var(--err-l)] text-[var(--err)]'
          : 'bg-[var(--bg)] text-[var(--sub)]'
  return (
    <span className={`rounded-full px-2 py-0.5 text-[10.5px] font-medium ${cls}`}>{children}</span>
  )
}
