src/shared/components/docs/CodeBlock.tsx

"use client";

import React from "react";
import { cn } from "@/shared/utils/cn";

interface CodeBlockProps {
  code: string;
  language?: string;
  filename?: string;
  children?: React.ReactNode;
  className?: string;
}

export default function CodeBlock({
  code,
  language = "typescript",
  filename,
  children,
  className,
}: CodeBlockProps) {
  const copyToClipboard = async () => {
    await navigator.clipboard.writeText(code);
  };

  return (
    <div
      className={cn(
        "group relative my-6 rounded-lg overflow-hidden border border-border",
        className
      )}
    >
      {filename && (
        <div className="flex items-center justify-between px-4 py-2 bg-bg-subtle border-b border-border text-xs font-medium text-text-muted">
          <span>{filename}</span>
          <button
            onClick={copyToClipboard}
            className="opacity-0 group-hover:opacity-100 transition-opacity hover:text-text-main"
            aria-label="Copy code to clipboard"
          >
            Copy
          </button>
        </div>
      )}
      <pre
        className="p-4 overflow-x-auto text-sm font-mono bg-bg-subtle text-text-main"
        tabIndex={0}
      >
        <code className="block">{children || code}</code>
      </pre>
    </div>
  );
}