"use client";

import { useState } from "react";

interface CodeBlockProps {
  children: string;
  language?: string;
}

export default function CodeBlock({
  children,
  language = "text",
}: CodeBlockProps) {
  const [copied, setCopied] = useState(false);

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

  // Determine language from document direction or default to English
  const isRTL =
    typeof document !== "undefined" && document.documentElement.dir === "rtl";
  const copyAriaLabel = copied
    ? isRTL
      ? "تم النسخ"
      : "Copied"
    : isRTL
      ? "نسخ الكود"
      : "Copy code to clipboard";

  return (
    <div className="relative group my-8">
      <div className="absolute top-3 right-3 z-10">
        <button
          onClick={copyToClipboard}
          className="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 focus-visible:bg-gray-600 text-white text-xs font-semibold rounded-lg transition-all duration-200 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-green focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
          aria-label={copyAriaLabel}
          aria-live="polite"
        >
          {copied ? (
            <>
              <svg
                className="w-4 h-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M5 13l4 4L19 7"
                />
              </svg>
              {isRTL ? "تم النسخ!" : "Copied!"}
            </>
          ) : (
            <>
              <svg
                className="w-4 h-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                />
              </svg>
              {isRTL ? "نسخ" : "Copy"}
            </>
          )}
        </button>
      </div>
      {language && (
        <div className="absolute top-3 left-3 z-10">
          <span className="px-3 py-1 bg-brand-green/20 text-brand-green text-xs font-bold rounded-md backdrop-blur-sm">
            {language}
          </span>
        </div>
      )}
      <pre className="bg-gradient-to-br from-gray-900 to-gray-950 text-gray-100 p-8 pt-14 rounded-2xl overflow-x-auto shadow-2xl border border-gray-700">
        <code>{children}</code>
      </pre>
    </div>
  );
}