---
import { cn } from '@/lib/utils'
import { Icon } from 'astro-icon/components'
import { cva, type VariantProps } from 'class-variance-authority'

const calloutConfig = {
  note: {
    style: 'border-blue-500 dark:bg-blue-950/5',
    textColor: 'text-blue-700 dark:text-blue-300',
    icon: 'lucide:info',
  },
  tip: {
    style: 'border-green-500 dark:bg-green-950/5',
    textColor: 'text-green-700 dark:text-green-300',
    icon: 'lucide:lightbulb',
  },
  warning: {
    style: 'border-amber-500 dark:bg-amber-950/5',
    textColor: 'text-amber-700 dark:text-amber-300',
    icon: 'lucide:alert-triangle',
  },
  danger: {
    style: 'border-red-500 dark:bg-red-950/5',
    textColor: 'text-red-700 dark:text-red-300',
    icon: 'lucide:shield-alert',
  },
  important: {
    style: 'border-purple-500 dark:bg-purple-950/5',
    textColor: 'text-purple-700 dark:text-purple-300',
    icon: 'lucide:message-square-warning',
  },
  definition: {
    style: 'border-purple-500 dark:bg-purple-950/5',
    textColor: 'text-purple-700 dark:text-purple-300',
    icon: 'lucide:book-open',
  },
  theorem: {
    style: 'border-teal-500 dark:bg-teal-950/5',
    textColor: 'text-teal-700 dark:text-teal-300',
    icon: 'lucide:check-circle',
  },
  lemma: {
    style: 'border-sky-400 dark:bg-sky-950/5',
    textColor: 'text-sky-700 dark:text-sky-300',
    icon: 'lucide:puzzle',
  },
  proof: {
    style: 'border-gray-500 dark:bg-gray-950/5',
    textColor: 'text-gray-700 dark:text-gray-300',
    icon: 'lucide:check-square',
  },
  corollary: {
    style: 'border-cyan-500 dark:bg-cyan-950/5',
    textColor: 'text-cyan-700 dark:text-cyan-300',
    icon: 'lucide:git-branch',
  },
  proposition: {
    style: 'border-slate-500 dark:bg-slate-950/5',
    textColor: 'text-slate-700 dark:text-slate-300',
    icon: 'lucide:file-text',
  },
  axiom: {
    style: 'border-violet-600 dark:bg-violet-950/5',
    textColor: 'text-violet-700 dark:text-violet-300',
    icon: 'lucide:anchor',
  },
  conjecture: {
    style: 'border-pink-500 dark:bg-pink-950/5',
    textColor: 'text-pink-700 dark:text-pink-300',
    icon: 'lucide:help-circle',
  },
  notation: {
    style: 'border-slate-400 dark:bg-slate-950/5',
    textColor: 'text-slate-700 dark:text-slate-300',
    icon: 'lucide:pen-tool',
  },
  remark: {
    style: 'border-gray-400 dark:bg-gray-950/5',
    textColor: 'text-gray-700 dark:text-gray-300',
    icon: 'lucide:message-circle',
  },
  intuition: {
    style: 'border-yellow-500 dark:bg-yellow-950/5',
    textColor: 'text-yellow-700 dark:text-yellow-300',
    icon: 'lucide:lightbulb',
  },
  recall: {
    style: 'border-blue-300 dark:bg-blue-950/5',
    textColor: 'text-blue-600 dark:text-blue-300',
    icon: 'lucide:rotate-ccw',
  },
  explanation: {
    style: 'border-lime-500 dark:bg-lime-950/5',
    textColor: 'text-lime-700 dark:text-lime-300',
    icon: 'lucide:help-circle',
  },
  example: {
    style: 'border-emerald-500 dark:bg-emerald-950/5',
    textColor: 'text-emerald-700 dark:text-emerald-300',
    icon: 'lucide:code',
  },
  exercise: {
    style: 'border-indigo-500 dark:bg-indigo-950/5',
    textColor: 'text-indigo-700 dark:text-indigo-300',
    icon: 'lucide:dumbbell',
  },
  problem: {
    style: 'border-orange-600 dark:bg-orange-950/5',
    textColor: 'text-orange-700 dark:text-orange-300',
    icon: 'lucide:alert-circle',
  },
  answer: {
    style: 'border-teal-500 dark:bg-teal-950/5',
    textColor: 'text-teal-700 dark:text-teal-300',
    icon: 'lucide:check',
  },
  solution: {
    style: 'border-emerald-600 dark:bg-emerald-950/5',
    textColor: 'text-emerald-700 dark:text-emerald-300',
    icon: 'lucide:check-circle-2',
  },
  summary: {
    style: 'border-sky-500 dark:bg-sky-950/5',
    textColor: 'text-sky-700 dark:text-sky-300',
    icon: 'lucide:list',
  },
} as const

const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)

const calloutVariants = cva('relative px-4 py-3 my-6 border-l-4 text-sm', {
  variants: {
    variant: Object.fromEntries(
      Object.entries(calloutConfig).map(([key, config]) => [key, config.style]),
    ),
  },
  defaultVariants: {
    variant: 'note',
  },
})

interface Props extends VariantProps<typeof calloutVariants> {
  title?: string
  class?: string
  variant?: keyof typeof calloutConfig
  defaultOpen?: boolean
}

const { title, variant = 'note', defaultOpen = true, ...rest } = Astro.props
---

<details
  class={cn(
    calloutVariants({ variant }),
    rest.class,
    '[&[open]>summary_svg:last-child]:rotate-180 [&[open]>summary]:mb-3',
  )}
  {...rest}
  open={defaultOpen}
>
  <summary
    class="flex cursor-pointer items-center font-medium [&::-webkit-details-marker]:hidden"
  >
    <Icon
      name={calloutConfig[variant].icon}
      class={cn('mr-2 size-4 shrink-0', calloutConfig[variant].textColor)}
    />
    <span class={cn('font-medium mr-2', calloutConfig[variant].textColor)}>
      {capitalize(variant)}
      {title && <span class="font-normal opacity-70"> ({title})</span>}
    </span>
    <Icon
      name="lucide:chevron-down"
      class={cn(
        'ml-auto h-4 w-4 shrink-0 transition-transform duration-200',
        calloutConfig[variant].textColor,
      )}
    />
  </summary>
  <div>
    <slot />
  </div>
</details>