import { LinkSlashIcon } from '@heroicons/react/24/solid';
import FinishSetup from '../step/FinishSetup';
interface UserArgs {
	registrationEmail?: string;
	registrationName?: string;
	testMode?: boolean;
	logged: boolean;
}

export default function User( {
	registrationEmail,
	registrationName,
	testMode = false,
	logged,
}: UserArgs ) {
	if ( testMode ) {
		return (
			<div>
				<p className="my-2 p-4 text-md rounded-md bg-black/20 max-w-96">
					<LinkSlashIcon
						aria-hidden="true"
						className="size-8 text-white/50 float-right"
					/>
					Currently{ ' ' }
					<b className="font-black">in offline testing mode</b>,<br />
					Your site uses a known local development address
					<br />
					<b className="font-black">
						Only a sample captcha will be shown
					</b>
					.
				</p>
			</div>
		);
	}
	return (
		<span className="isolate flex rounded-md shadow-sm">
			<div className="relative inline-flex items-center gap-x-1.5 rounded-l-md bg-black/20 px-3 py-2 text-sm font-semibold text-zinc-100">
				<FinishSetup logged={ logged } />
			</div>
			<div className="relative -ml-px inline-flex items-center rounded-r-md bg-black/20 px-2 text-sm font-semibold text-white flex-grow">
				<div>
					<span className="text-white/70 font-thin mr-2">
						&lt;{ registrationName }&gt;
					</span>{ ' ' }
					{ registrationEmail }
				</div>
			</div>
		</span>
	);
}