import { Check, Copy } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { toast } from 'sonner';

import { Button } from '../common/Button';

type CopyButtonProps = {
  value?: string | null;
};

export const CopyButton = ({ value }: CopyButtonProps) => {
  const t = useTranslations('components.copyButton');

  const [isCopied, setIsCopied] = useState(false);

  function onCopy() {
    if (!value) return;

    setIsCopied(true);
    void navigator.clipboard.writeText(value);
    toast.success(t('successMessage'));
    setTimeout(() => {
      setIsCopied(false);
    }, 2000);
  }

  const Icon = isCopied ? Check : Copy;

  return (
    <Button
      disabled={!value || isCopied}
      size="lgIcon"
      variant="ghost"
      onClick={() => { onCopy(); }}
    >
      <Icon className="size-5" />
    </Button>
  );
};