import { Pencil } from "lucide-react";
import { Button } from "@/components/ui/button";

interface HoverEditButtonProps {
	onClick: () => void;
	label?: string;
}

/**
 * Hover-to-reveal edit affordance.
 *
 * Keeps the `rail-edit` class plus the opacity-0 base + transition so the
 * existing hover-reveal rules in consuming pages (Actions, Settings) still
 * target it (`&:hover .rail-edit { opacity: 1 }`) until those pages migrate.
 * MUI IconButton + EditOutlined → shadcn `Button variant="ghost" size="icon-sm"`
 * + lucide `Pencil`. Same exported props/display name.
 */
export function HoverEditButton({
	onClick,
	label = "Edit",
}: HoverEditButtonProps) {
	return (
		<Button
			variant="ghost"
			size="icon-sm"
			className="rail-edit text-muted-foreground opacity-0 transition-opacity duration-100 ease-out"
			aria-label={label}
			onMouseDown={(e) => e.stopPropagation()}
			onClick={(e) => {
				e.stopPropagation();
				onClick();
			}}
		>
			<Pencil />
		</Button>
	);
}