import {Button, rem, Tooltip} from '@mantine/core';
import {IconCheck, IconCopy} from '@tabler/icons-react';
import {FC} from "react";
import {useClipboard} from "@mantine/hooks";

type Props = {
    children: string;
    value: string
    onCopiedLabel: string;
}

export const ButtonCopy: FC<Props> = ({children, onCopiedLabel, value}) => {
    const clipboard = useClipboard();

    return (
        <Tooltip
            label={onCopiedLabel}
            offset={5}
            position="bottom"
            radius="xl"
            transitionProps={{duration: 100, transition: 'slide-down'}}
            opened={clipboard.copied}
        >
            <Button
                variant="light"
                rightSection={
                    clipboard.copied ? (
                        <IconCheck
                            style={{width: rem(20), height: rem(20)}}
                            stroke={1.5}
                        />
                    ) : (
                        <IconCopy
                            style={{width: rem(20), height: rem(20)}}
                            stroke={1.5}
                        />
                    )
                }
                radius="xl"
                size="md"
                styles={{
                    root: {
                        paddingRight: rem(14),
                    },
                    section: {marginLeft: rem(22)},
                }}
                onClick={() => clipboard.copy(value)}
            >
                {children}
            </Button>
        </Tooltip>
    );
}
export default ButtonCopy;