Input group

"use client";

import { Field, FieldHint, FieldLabel } from "@moodinary/ui/components/field";
import {
	CopyField,
	PrefixedInput,
	SearchInput,
	SuffixInput,
} from "@moodinary/ui/components/input-group";
import { useCallback, useState } from "react";

function copyHint(copyError: boolean, copied: boolean): string {
	if (copyError) {
		return "No se pudo copiar. Seleccioná el código y copialo a mano.";
	}
	return copied
		? "Link de ejemplo copiado."
		: "Código ilustrativo, no es un acceso real.";
}

export default function InputGroupDefault() {
	const [copied, setCopied] = useState(false);
	const [copyError, setCopyError] = useState(false);
	const copy = useCallback(async () => {
		setCopyError(false);
		try {
			await navigator.clipboard.writeText("https://send.moodinary.com/ABC123");
			setCopied(true);
			setTimeout(() => setCopied(false), 1500);
		} catch {
			setCopyError(true);
		}
	}, []);
	return (
		<div className="grid w-full max-w-xl gap-4 sm:grid-cols-2">
			<Field>
				<FieldLabel htmlFor="screen-link">Link de la pantalla</FieldLabel>
				<PrefixedInput
					id="screen-link"
					inputClassName="font-mono text-[13px]"
					prefix="/kiosk/"
					readOnly
					value="equipo-demo?token=ejemplo"
				/>
			</Field>
			<Field>
				<FieldLabel htmlFor="search">Buscar por idea</FieldLabel>
				<SearchInput
					id="search"
					placeholder="Buscá por idea, no solo por palabra"
				/>
			</Field>
			<Field>
				<FieldLabel htmlFor="send-code">Código</FieldLabel>
				<CopyField
					aria-label="send.moodinary.com/ABC123"
					copied={copied}
					copyLabel={copied ? "Link copiado" : "Copiar link"}
					id="send-code"
					onCopy={copy}
					prefix="send.moodinary.com/"
					value="ABC123"
				/>
				<FieldHint aria-live="polite">{copyHint(copyError, copied)}</FieldHint>
			</Field>
			<Field>
				<FieldLabel htmlFor="suffix-demo">Unidad (demostración)</FieldLabel>
				<SuffixInput
					defaultValue={50}
					id="suffix-demo"
					max={100}
					min={0}
					suffix="%"
					type="number"
				/>
			</Field>
		</div>
	);
}