import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'

type MachineCardProps = {
	img: string
	name: string
	tags: string[]
	id: string
	free: boolean
}

const scope = getStyleScope(MachineCard)

export function MachineCard(
	{ name, tags, img, id, free }: MachineCardProps,
) {
	useSmartStylesheet(import.meta, { scope })

	const stateIcon = free
		? <i class='ri-checkbox-circle-line'></i>
		: <i class='ri-indeterminate-circle-line'></i>

	return (
		<div class={scope} style={{ backgroundImage: img }}>
			<div class='spacer'></div>
			<h3>
				{stateIcon}
				<span>{name}</span>
			</h3>
			<div class='tags'>
				{tags.map((tag, index) => <span key={index}>{tag}</span>)}
			</div>
			<div class='footer'>
				<a href={`/machines/${id}`}>Infos</a>
				<a href={`/machines/${id}`}>Reserver</a>
			</div>
		</div>
	)
}

export const machineMock: MachineCardProps[] = Array(20).fill(undefined).map(
	(_, index) => {
		return {
			name: `Machine ${index}`,
			tags: ['3d', 'laser'],
			free: Math.random() > 0.5,
			img: `url("https://picsum.photos/id/${index + 10}/400")`,
			id: String(index),
		}
	},
)