'use client';

import { useState } from 'react';
import { Check, Copy } from 'lucide-react';
import { cn } from '@/lib/cn';

export interface CodeBlockProps {
  code: string;
  language?: string;
  label?: string;
  className?: string;
}

export function CodeBlock({ code, language, label, className }: CodeBlockProps) {
  const [copied, setCopied] = useState(false);

  async function onCopy() {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {}
  }

  return (
    <div className={cn('panel-subtle relative overflow-hidden', className)}>
      {(label || language) && (
        <div className="flex items-center justify-between border-b border-[--color-border] px-3 py-2">
          <span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
            {label ?? language}
          </span>
          <button
            type="button"
            onClick={onCopy}
            aria-label="Copy"
            className="inline-flex items-center gap-1.5 rounded-sm text-[11px] text-[--color-fg-subtle] transition-colors duration-200 ease-out hover:text-[--color-fg]"
          >
            {copied ? (
              <>
                <Check size={12} /> copied
              </>
            ) : (
              <>
                <Copy size={12} /> copy
              </>
            )}
          </button>
        </div>
      )}
      {!label && !language && (
        <button
          type="button"
          onClick={onCopy}
          aria-label="Copy"
          className="absolute right-2 top-2 inline-flex items-center gap-1.5 rounded-sm border border-[--color-border] bg-[--color-bg-elevated] px-2 py-1 text-[11px] text-[--color-fg-subtle] transition-colors duration-200 ease-out hover:text-[--color-fg]"
        >
          {copied ? <Check size={12} /> : <Copy size={12} />}
        </button>
      )}
      <pre className="mono overflow-x-auto px-3 py-3 text-[12.5px] leading-relaxed text-[--color-fg]">
        <code>{code}</code>
      </pre>
    </div>
  );
}