"use client";

import { useEditMode } from "@/context/EditModeContext";
import { Pencil } from "lucide-react";

type Props = {
  sectionId: string;
  label: string;
  children: React.ReactNode;
  className?: string;
};

export function EditableSection({ sectionId, label, children, className = "" }: Props) {
  const { editMode, openDrawer } = useEditMode();

  if (!editMode) {
    return <div className={className}>{children}</div>;
  }

  return (
    <div
      className={`relative group cursor-default ${className}`}
      style={{ outline: "2px dashed rgba(230,126,34,0.4)", outlineOffset: "2px", borderRadius: "4px" }}
    >
      {children}
      <button
        onClick={() => openDrawer(sectionId, label)}
        className="absolute top-2 right-2 z-20 flex items-center gap-1.5 px-2.5 py-1.5 bg-[#E67E22] text-white text-xs font-medium rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[#d4691b]"
        aria-label={`Éditer ${label}`}
      >
        <Pencil size={11} />
        Éditer
      </button>
    </div>
  );
}