import { PlaneIcon } from "lucide-react";

interface StatsProps {
	isChecked: boolean;
}

export default ({ isChecked }: StatsProps) => {
	return isChecked ? <PilotStats /> : <DispoStats />;
};

export const PilotStats = (): JSX.Element => {
	return (
		<div className="stats shadow">
			<div className="stat">
				<div className="stat-figure text-primary">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						className="inline-block h-8 w-8 stroke-current"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth="2"
							d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
						></path>
					</svg>
				</div>
				<div className="stat-title">Einsätze geflogen</div>
				<div className="stat-value text-primary">127</div>
				<div className="stat-desc">Du bist damit unter den top 5%!</div>
			</div>

			<div className="stat">
				<div className="stat-figure text-secondary">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						className="inline-block h-8 w-8 stroke-current"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth="2"
							d="M13 10V3L4 14h7v7l9-11h-7z"
						></path>
					</svg>
				</div>
				<div className="stat-title">Pilot Login Zeit</div>
				<div className="stat-value text-secondary">35h 12m</div>
				<div className="stat-desc">Mehr als 58% aller anderen User!</div>
			</div>

			<div className="stat">
				<div className="stat-figure text-info">
					<PlaneIcon className="w-8 h-8" />
				</div>
				<div className="stat-value text-info">Christoph 31</div>
				<div className="stat-title">
					War bisher dein Rettungsmittel der Wahl
				</div>
				<div className="stat-desc text-secondary">
					87 Stationen warten noch auf dich!
				</div>
			</div>
		</div>
	);
};

export const DispoStats = (): JSX.Element => {
	return (
		<div className="stats shadow">
			<div className="stat">
				<div className="stat-figure text-primary">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						className="inline-block h-8 w-8 stroke-current"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth="2"
							d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
						></path>
					</svg>
				</div>
				<div className="stat-title">Einsätze disponiert</div>
				<div className="stat-value text-primary">578</div>
				<div className="stat-desc">Du bist damit unter den top 9%!</div>
			</div>

			<div className="stat">
				<div className="stat-figure text-secondary">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						className="inline-block h-8 w-8 stroke-current"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth="2"
							d="M13 10V3L4 14h7v7l9-11h-7z"
						></path>
					</svg>
				</div>
				<div className="stat-title">Disponent Login Zeit</div>
				<div className="stat-value text-secondary">53h 12m</div>
				<div className="stat-desc">Mehr als 69% aller anderen User!</div>
			</div>

			<div className="stat">
				<div className="stat-figure text-info">
					<PlaneIcon className="w-8 h-8" />
				</div>
				<div className="stat-value text-info">Christoph Berlin</div>
				<div className="stat-title">Wurde von dir am meisten Disponiert</div>
				<div className="stat-desc text-secondary">
					43 Stationen warten auf deine Einsätze!
				</div>
			</div>
		</div>
	);
};