import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "~/components/ui/accordion";

const examples = [
  {
    name: "Lead",
    description: "Intro paragraph with larger muted text.",
    code: `<Lead>
Short opening summary for the post.
</Lead>`,
  },
  {
    name: "Callout",
    description: "Highlighted note, tip, or warning block.",
    code: `<Callout title="Heads up" variant="note">
Important context for readers.
</Callout>

<Callout title="Tip" variant="tip">
A practical recommendation.
</Callout>

<Callout title="Careful" variant="warning">
A caveat or tradeoff.
</Callout>`,
  },
  {
    name: "ButtonLink",
    description: "Button-styled internal or external link.",
    code: `<ButtonLink href="/projects">
View projects
</ButtonLink>

<ButtonLink href="https://example.com" variant="outline">
External resource
</ButtonLink>`,
  },
  {
    name: "Figure",
    description: "Image with optional caption.",
    code: `<Figure
  src="https://example.com/image.jpg"
  alt="Describe the image"
  caption="Optional caption"
/>`,
  },
  {
    name: "PullQuote",
    description: "Large emphasized quote or takeaway.",
    code: `<PullQuote>
A highlighted quote or strong takeaway.
</PullQuote>`,
  },
  {
    name: "TagList",
    description: "Inline list of tag badges inside the post body.",
    code: `<TagList tags={["nextjs", "mdx", "uploadthing"]} />`,
  },
  {
    name: "Badge",
    description: "Small inline label.",
    code: `<Badge variant="outline">Next.js</Badge>`,
  },
];

export default function MdxComponentReference() {
  return (
    <section className="rounded-lg border p-4">
      <h2 className="text-base font-semibold">MDX Components</h2>
      <p className="text-muted-foreground mt-1 text-sm">
        Components available inside blog post content. Type <code className="rounded bg-muted px-1">[[</code> for internal links or <code className="rounded bg-muted px-1">&lt;</code> for component snippets.
      </p>
      <Accordion type="single" collapsible className="mt-3">
        {examples.map((example) => (
          <AccordionItem key={example.name} value={example.name}>
            <AccordionTrigger>
              <span>
                <span className="block">{example.name}</span>
                <span className="text-muted-foreground block text-xs font-normal">{example.description}</span>
              </span>
            </AccordionTrigger>
            <AccordionContent>
              <pre className="bg-muted overflow-x-auto rounded-md p-3 text-xs">
                <code>{example.code}</code>
              </pre>
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </section>
  );
}