/**
 * Internal Dependencies
 */
import { clsx } from '@admin/utils';
import { RadioDot } from '@admin/components/RadioDot';

export function SelectCard( { selected, onClick, Icon, title, desc, badge } ) {
	return (
		<button
			type="button"
			onClick={ onClick }
			aria-pressed={ selected }
			className={ clsx(
				'flex w-full items-start gap-3 rounded border p-4 text-left cursor-pointer transition-colors',
				selected
					? 'border-primary bg-primary/5 shadow-[inset_0_0_0_1px_var(--color-primary)]'
					: 'border-border bg-white hover:border-gray-300'
			) }
		>
			{ Icon ? (
				<span
					className={ clsx(
						'flex size-8 shrink-0 items-center justify-center rounded',
						selected ? 'bg-primary/10' : 'bg-gray-100'
					) }
				>
					<Icon className="size-5" />
				</span>
			) : (
				<RadioDot checked={ selected } className="mt-0.5" />
			) }
			<span className="flex flex-col gap-1">
				<span className="flex items-center gap-2 text-sm font-semibold text-gray-900">
					{ title }
					{ badge && (
						<span className="rounded-full bg-blue-50 px-2 py-0.5 text-[11px] font-semibold text-primary">
							{ badge }
						</span>
					) }
				</span>
				{ desc && (
					<span className="text-[12.5px] leading-relaxed text-gray-500">
						{ desc }
					</span>
				) }
			</span>
		</button>
	);
}