'use client';

import { useState } from 'react';

interface BlogCodeBlockProps {
  children: string;
  language?: string;
  filename?: string;
}

export const BlogCodeBlock = ({
  children,
  language = 'text',
  filename,
}: BlogCodeBlockProps) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(children);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  const displayName = filename || language;

  return (
    <div className="my-8 overflow-hidden rounded-xl border border-gray-200 bg-[#1e1e1e] shadow-xl">
      <div className="flex items-center justify-between border-b border-white/5 bg-[#252526] px-4 py-2">
        <div className="flex items-center gap-2">
          <div className="h-3 w-3 rounded-full bg-[#ff5f56]" />
          <div className="h-3 w-3 rounded-full bg-[#ffbd2e]" />
          <div className="h-3 w-3 rounded-full bg-[#27c93f]" />
        </div>
        {displayName && (
          <span className="ml-4 text-xs font-mono text-gray-400">
            {displayName}
          </span>
        )}
        <div className="flex-grow" />
        <button
          onClick={handleCopy}
          className="text-xs text-gray-400 hover:text-white transition-colors"
        >
          {copied ? 'Copied!' : 'Copy'}
        </button>
      </div>
      <div className="p-6 overflow-x-auto blog-scrollbar">
        <pre className="font-mono text-sm leading-relaxed text-[#d4d4d4] m-0 p-0 bg-transparent">
          <code>{children}</code>
        </pre>
      </div>
    </div>
  );
};
