export type MarkdownRendererProps = {
  title?: string
  kicker?: string
}

export function MarkdownRenderer({
  title = 'Quiet power, shipped weekly.',
  kicker = 'NORTHSTAR / RELEASE NOTES',
}: MarkdownRendererProps) {
  return (
    <div className="markdown-card">
      <div className="markdown-toolbar">
        <span className="eyebrow">Preview</span>
        <span className="mono muted">release-notes.md</span>
      </div>

      <article className="markdown-body">
        <span className="md-kicker">{kicker}</span>
        <h3>{title}</h3>
        <p>Our components help teams move quickly without making the interface feel rushed.</p>

        <div className="md-callout">
          <span className="callout-mark">✦</span>
          <p>
            <strong>New in 0.8.2</strong>
            <br />
            Button focus rings now respect your theme while keeping a dependable contrast ratio.
          </p>
        </div>

        <h4>What changed</h4>
        <ul>
          <li>
            Added <code>accent-subtle</code> surface token
          </li>
          <li>Improved keyboard navigation in menus</li>
          <li>Reduced layout shift during loading states</li>
        </ul>

        <div className="md-table">
          <div>
            <span>Token</span>
            <span>Value</span>
            <span>Role</span>
          </div>
          <div>
            <code>surface-1</code>
            <span>#111118</span>
            <span>Elevated panels</span>
          </div>
          <div>
            <code>accent</code>
            <span className="md-accent">#A69BFF</span>
            <span>Interactive focus</span>
          </div>
        </div>
      </article>
    </div>
  )
}