import { ActionIcon, Button, CopyButton, MantineSize } from "@mantine/core";
import { IconCheck, IconCopy } from "@tabler/icons-react";

interface CopyButtonProps {
    value: string;
    caption: string;
    timeout?: number;
    size?: MantineSize;
    fullWidth?: boolean;
    onClick?: () => void;
    style?: React.CSSProperties;
}

export function CopyButtonIcon(props : CopyButtonProps) {
    return (
        <div onClick={props.onClick} style={{
            ...props.style,
            width: props.fullWidth ? '100%' : undefined,
        }}>
            <CopyButton value={props.value} timeout={props.timeout ? props.timeout : 2000}>
                {({ copied, copy }) => (
                    <Button fullWidth={props.fullWidth} size={props.size} variant={'light'} color={copied ? 'teal' : 'blue'} onClick={copy}>
                        <>
                        <ActionIcon component="span" color={copied ? 'teal' : 'blue'} variant="subtle" onClick={copy}>
                        {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
                        </ActionIcon> {props.caption}
                        </>
                    </Button>
                )}
            </CopyButton>
        </div>
    )
}