import classNames from 'classnames';
import { Checkmark } from '@launch/svg';

export const Card = ({
	image,
	heading,
	name,
	description,
	selected,
	onClick,
	lock,
}) => {
	return (
		<div
			role={lock ? undefined : 'button'}
			tabIndex={lock ? undefined : 0}
			aria-label={lock ? undefined : name}
			className={classNames(
				'text-base p-0 bg-transparent overflow-hidden rounded-lg border border-gray-100',
				{
					'button-focus': !lock,
				},
			)}
			onKeyDown={(e) => {
				if (['Enter', 'Space', ' '].includes(e.key)) {
					if (!lock) onClick();
				}
			}}
			onClick={() => {
				if (!lock) onClick();
			}}>
			<div className="border-gray-100 border-b p-2 flex justify-between min-w-sm">
				<div
					className={classNames('flex items-center', {
						'text-gray-700': !selected,
					})}>
					<span className="text-left">{name}</span>
					{lock && (
						<span className="w-4 h-4 text-base leading-none pl-2 mr-6 dashicons dashicons-lock"></span>
					)}
				</div>
				{(lock || selected) && <Checkmark className="text-design-main w-6" />}
			</div>
			<div className="flex flex-col">
				{image ? (
					<div
						style={{ backgroundImage: `url(${image})` }}
						className="h-32 bg-cover"
					/>
				) : (
					<div className="h-32 bg-gray-100" />
				)}
				<div className="p-6">
					<div className="text-left text-base font-bold mb-2">{heading}</div>
					<div className="text-left text-sm">{description}</div>
				</div>
			</div>
		</div>
	);
};