"use client"; // This directive indicates that the component is client-side

import { useState } from "react";
import { Button } from "../ui/button";
import { Check, Copy } from "lucide-react";

export default function CopyButton({ code }: { code: string }) {
	const [copied, setCopied] = useState(false);

	const copyCode = async () => {
		try {
			await navigator.clipboard.writeText(code);
			setCopied(true);
			setTimeout(() => setCopied(false), 2000);
		} catch (error) {
			console.error("Failed to copy!", error);
		}
	};

	return (
		<Button
			onClick={copyCode}
			className="absolute top-2 right-2 bg-accent hover:bg-muted text-white p-2 rounded"
			size={"icon"}
		>
			{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
		</Button>
	);
}