/**
 * CodeSnippet — Styled code block with copy functionality
 * Design: Warm Showroom — dark surface with warm tones
 */
import { useState } from "react";
import { Check, Copy } from "lucide-react";

interface CodeSnippetProps {
  code: string;
  language: string;
  title?: string;
  filename?: string;
}

export default function CodeSnippet({ code, language, title, filename }: CodeSnippetProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    await navigator.clipboard.writeText(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="rounded-xl overflow-hidden" style={{ border: "1px solid #e7e0d5" }}>
      {/* Header */}
      <div
        className="flex items-center justify-between px-4 py-2.5"
        style={{ background: "#292524" }}
      >
        <div className="flex items-center gap-3">
          <div className="flex gap-1.5">
            <span className="w-3 h-3 rounded-full" style={{ background: "#C2410C" }} />
            <span className="w-3 h-3 rounded-full" style={{ background: "#EAB308" }} />
            <span className="w-3 h-3 rounded-full" style={{ background: "#14532D" }} />
          </div>
          {(title || filename) && (
            <span className="text-xs" style={{ color: "#a8a29e", fontFamily: "'Fira Code', monospace" }}>
              {filename || title}
            </span>
          )}
        </div>
        <div className="flex items-center gap-2">
          <span
            className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded"
            style={{ background: "#3f3f3f", color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}
          >
            {language}
          </span>
          <button
            onClick={handleCopy}
            className="p-1.5 rounded-md transition-colors hover:bg-white/10"
          >
            {copied ? (
              <Check className="w-3.5 h-3.5 text-green-400" />
            ) : (
              <Copy className="w-3.5 h-3.5" style={{ color: "#a8a29e" }} />
            )}
          </button>
        </div>
      </div>

      {/* Code body */}
      <div
        className="px-5 py-4 overflow-x-auto"
        style={{ background: "#1c1917" }}
      >
        <pre className="text-sm leading-relaxed" style={{ fontFamily: "'Fira Code', monospace" }}>
          <code style={{ color: "#e7e5e4" }}>{code}</code>
        </pre>
      </div>
    </div>
  );
}
