import { CopyButton } from './CopyButton';
import { Frame, FrameHeader } from './ui';

export function CodeBlock({ lang, content }: { lang: string; content: string }) {
  return (
    <Frame>
      <FrameHeader>
        <span className="text-[12px] font-bold uppercase tracking-[0.1em] text-muted">{lang || 'code'}</span>
        <CopyButton text={content} />
      </FrameHeader>
      <pre className="m-0 overflow-x-auto bg-panel-code p-[18px] font-code text-[15px] leading-[1.7] text-violet-deep">{content}</pre>
    </Frame>
  );
}