'use client';

import Calendar from '@images/date.svg';
import Image from 'next/image';

import { Ban, Snowflake, CircleOff } from 'lucide-react';

export function TestCard({ data, error, isLoading }: { data: any; error: any; isLoading: boolean }) {
	if (isLoading)
		return (
			<div className={'w-fit h-fit relative'}>
				<Image src={Calendar} alt={'Calendrier absolute'} />
				<div className={'w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center'}>
					<Snowflake width={36} height={36} color={'#000000'} className={'animate-spin place-self-center'} />
					<span className={'text-black text-xs'}>Chargement</span>
				</div>
			</div>
		);
	if (error)
		return (
			<div className={'w-fit h-fit relative'}>
				<Image src={Calendar} alt={'Calendrier absolute'} />
				<div className={'w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center'}>
					<Ban width={36} height={36} color={'#000000'} className={'place-self-center'} />
					<span className={'text-black text-xs'}>Erreur</span>
				</div>
			</div>
		);
	if (!data)
		return (
			<div className={'w-fit h-fit relative'}>
				<Image src={Calendar} alt={'Calendrier absolute'} />
				<div className={'w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center'}>
					<CircleOff width={36} height={36} color={'#000000'} className={'place-self-center'} />
					<span className={'text-black text-xs'}>Pas de test</span>
				</div>
			</div>
		);

	return (
		<div className={'w-fit h-fit relative'}>
			<Image src={Calendar} alt={'Calendrier absolute'} />
			<div className={'w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center'}>
				<span className={'text-black text-[36px] font-medium'}>{new Date().getDate()}</span>
				<span className={'text-black text-xs'}>{data.testOf.firstName}</span>
			</div>
		</div>
	);
}