'use client'

import { useEffect, useState } from 'react'
import { TbCheck, TbCopy } from 'react-icons/tb'
import { ghostButtonClass } from '~/components/admin/styles'

export type CopyButtonProps = {
	value: string
	label: string
	doneLabel: string
	className?: string
}

export function CopyButton({ value, label, doneLabel, className }: CopyButtonProps) {
	const [copied, setCopied] = useState(false)

	useEffect(() => {
		if (!copied) {
			return
		}

		const timer = setTimeout(() => setCopied(false), 2000)

		return () => clearTimeout(timer)
	}, [copied])

	async function copy() {
		try {
			await navigator.clipboard.writeText(value)
			setCopied(true)
		} catch {
			setCopied(false)
		}
	}

	return (
		<button type="button" onClick={copy} className={`${ghostButtonClass} ${className ?? ''}`}>
			{copied ? (
				<TbCheck aria-hidden="true" className="size-4 shrink-0" />
			) : (
				<TbCopy aria-hidden="true" className="size-4 shrink-0" />
			)}
			{copied ? doneLabel : label}
		</button>
	)
}