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

type Props = {
    children: string;
    onCopyClick: () => void;
    onCopiedLabel: string;
    copied: boolean;
}

export const ButtonCopyControlled: FC<Props> = ({children, onCopiedLabel, onCopyClick, copied}) => {
    return (
        <Tooltip
            label={onCopiedLabel}
            offset={5}
            position="bottom"
            radius="xl"
            transitionProps={{duration: 100, transition: 'slide-down'}}
            opened={copied}
        >
            <Button
                variant="light"
                rightSection={
                    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={onCopyClick}
            >
                {children}
            </Button>
        </Tooltip>
    );
}
