import { ButtonProps } from "@/components/button/Button";
import DangerButton from "@/components/button/DangerButton";
import PrimaryButton from "@/components/button/PrimaryButton";
import { RaidInstance } from "@/interface/RaidInstance";
import { useTheme } from "@/providers/ThemeProvider";
import { BsPencilFill, BsTrash3 } from "react-icons/bs";
import { Tooltip } from "react-tooltip";


export default function RaidInstanceAdminButtons({
	raidInstance,
	buttonProps,
	showRaidInstanceModal,
	showDeleteRaidInstanceModal
}:{
	raidInstance?: RaidInstance;
	buttonProps: ButtonProps;
	showRaidInstanceModal: () => void;
	showDeleteRaidInstanceModal: () => void;
}){
	const { theme } = useTheme();
	const componentId = crypto.randomUUID().replaceAll("-", "");


	return (
		<div
			className="flex flex-row gap-2"
		>
			<PrimaryButton
				{...buttonProps}
				id={`raidInstanceAdminButtonsEdit${componentId}`}
				onClick={showRaidInstanceModal}
				aria-label={`Edit ${raidInstance?.raidInstanceName}`}
				data-tooltip-delay-show={750}
			>
				<BsPencilFill
					size={22}
				/>
			</PrimaryButton>
			<DangerButton
				{...buttonProps}
				id={`raidInstanceAdminButtonsDelete${componentId}`}
				onClick={showDeleteRaidInstanceModal}
				aria-label={`Delete ${raidInstance?.raidInstanceName}`}
				data-tooltip-delay-show={750}
			>
				<BsTrash3
					size={22}
				/>
			</DangerButton>
			<Tooltip
				anchorSelect={`#raidInstanceAdminButtonsEdit${componentId}`}
				place="top"
				variant={theme === "dark" ? "light" : "dark"}
			>
				Edit {raidInstance?.raidInstanceName}
			</Tooltip>
			<Tooltip
				anchorSelect={`#raidInstanceAdminButtonsDelete${componentId}`}
				place="top"
				variant={theme === "dark" ? "light" : "dark"}
			>
				Delete {raidInstance?.raidInstanceName}
			</Tooltip>
		</div>
	);
}