import { observer } from "mobx-react-lite";
import { IconButton } from "@chakra-ui/react";
import { Edit2Icon } from "lucide-react";

const UserMessageTools = observer(({ disabled = false, message, onEdit }) => (
  <IconButton
    bg="transparent"
    color="text.primary"
    aria-label="Edit message"
    title="Edit message"
    icon={<Edit2Icon size={"1em"} />}
    onClick={() => onEdit(message)}
    _active={{
      bg: "transparent",
      svg: {
        stroke: "brand.100",
        transition: "stroke 0.3s ease-in-out",
      },
    }}
    _hover={{
      bg: "transparent",
      svg: {
        stroke: "accent.secondary",
        transition: "stroke 0.3s ease-in-out",
      },
    }}
    variant="ghost"
    size="sm"
    isDisabled={disabled}
    _focus={{ boxShadow: "none" }}
  />
));

export default UserMessageTools;