import React, {
    ComponentProps,
    Dispatch,
    ReactNode,
    SetStateAction,
} from "react";
import { Copy, LucideProps } from "lucide-react";
import Button from "../layout/Button";

type Props = Omit<ComponentProps<typeof Button>, "title"> & {
    slugText: string;
    justIcon?: boolean;
    noIcon?: boolean;
    title?: string;
    outlined?: boolean;
    successMsg?: string | ReactNode;
    icon?: ReactNode;
    iconProps?: LucideProps;
    setToastOpen?: Dispatch<SetStateAction<boolean>>;
};

export default function CopySlug({
    slugText,
    justIcon,
    noIcon,
    title,
    outlined,
    successMsg,
    iconProps,
    icon,
    setToastOpen,
    ...props
}: Props) {
    return (
        <Button
            title={title || slugText}
            size="smaller"
            variant="ghost"
            color="gray"
            {...props}
            onClick={(e) => {
                navigator.clipboard.writeText(slugText).then(() => {
                    setToastOpen?.(false);

                    setTimeout(() => {
                        setToastOpen?.(true);
                    }, 100);
                });
                props.onClick?.(e);
            }}
            style={{ ...(outlined ? {} : { padding: 0 }), ...props.style }}
        >
            {noIcon
                ? null
                : icon || <Copy size={outlined ? 15 : 20} {...iconProps} />}
            {!justIcon && (title ? title : "Copy Slug")}
        </Button>
    );
}