CodeExampleCard.tsx

import { useState } from 'react'
import { Card } from '~/components/Card'
import { HighlightedCodeBlock } from '~/components/markdown'
import { FrameworkIconTabs } from '~/components/FrameworkIconTabs'
import type { Framework } from '~/libraries'

interface CodeExampleCardProps {
  title?: string
  frameworks: Framework[]
  /** Pre-highlighted HTML by framework (from server-side Shiki) */
  codeByFramework: Partial<Record<Framework, { lang: string; html: string }>>
}

export function CodeExampleCard({
  title = 'Just a quick look...',
  frameworks,
  codeByFramework,
}: CodeExampleCardProps) {
  const [framework, setFramework] = useState<Framework>(frameworks[0])

  const selected =
    codeByFramework[framework] || Object.values(codeByFramework)[0]

  if (!selected) return null

  return (
    <div className="px-4 space-y-4 flex flex-col items-center">
      <div className="text-3xl font-black">{title}</div>
      <Card className="group overflow-hidden max-w-full mx-auto [&_pre]:bg-transparent! [&_pre]:p-4!">
        <div>
          <FrameworkIconTabs
            frameworks={frameworks}
            value={framework}
            onChange={setFramework}
          />
          <HighlightedCodeBlock
            html={selected.html}
            lang={selected.lang}
            showCopyButton={false}
            className="mt-0 border-0"
          />
        </div>
      </Card>
    </div>
  )
}