import ReactMarkdown from "react-markdown";

import usageMarkdown from "./usage.md?raw";

export default function Usage() {
  return (
    <div className="prose leading-loose">
      <ReactMarkdown
        components={{
          h1: ({ children }) => <h1 className="text-2xl font-bold mt-12 mb-2 first:mt-4">{children}</h1>,
          h2: ({ children }) => <h2 className="text-xl font-semibold mt-12 mb-2 first:mt-4">{children}</h2>,
          h3: ({ children }) => <h3 className="text-lg font-semibold mt-12 mb-2 first:mt-4">{children}</h3>,
          p: ({ children }) => <p className="leading-6 mb-3 last:mb-0">{children}</p>,
          ul: ({ children }) => <ul className="list-disc pl-5 mb-3">{children}</ul>,
          ol: ({ children }) => <ol className="list-decimal pl-5 mb-3">{children}</ol>,
          li: ({ children }) => <li className="mb-1">{children}</li>,
          code: ({ children }) => <code className="bg-gray-200 px-1 py-0.5 rounded">{children}</code>
        }}
      >
        {usageMarkdown}
      </ReactMarkdown>
    </div>
  );
}