"use client";
import { DrawingPinFilledIcon } from "@radix-ui/react-icons";
import { Event, Participant, User } from "@repo/db";
import ModalBtn from "./Modal";
import MDEditor from "@uiw/react-md-editor";
import { Badge } from "@repo/shared-components";

export const EventCard = ({
	user,
	event,
}: {
	user: User;
	event: Event & {
		Participants: Participant[];
	};
}) => {
	return (
		<div className="col-span-full">
			<div className="card bg-base-200 mb-4 shadow-xl">
				<div className="card-body">
					<h2 className="card-title">{event.name}</h2>
					<div className="absolute right-0 top-0 m-4">
						{event.type === "COURSE" && (
							<span className="badge badge-info badge-outline">Zusatzqualifikation</span>
						)}
						{event.type === "EVENT" && (
							<span className="badge badge-secondary badge-outline">Event</span>
						)}
					</div>
					<div className="grid grid-cols-6 gap-4">
						<div className="col-span-4">
							<div className="text-balance text-left" data-color-mode="dark">
								<MDEditor.Markdown
									source={event.descriptionShort}
									style={{
										backgroundColor: "transparent",
									}}
								/>
							</div>
						</div>
						<div className="col-span-2 flex justify-end">
							{event.finishedBadges.map((b) => {
								return <Badge badge={b} key={b} />;
							})}
						</div>
					</div>
					<div className="card-actions mt-5 flex items-center justify-between">
						<div>
							<p className="flex items-center gap-2 text-left text-gray-600">
								<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen: </b>
								{!event.requiredBadges.length && "Keine"}
							</p>
							{!!event.requiredBadges.length && (
								<div className="ml-6 flex">
									<b className="mr-2 text-left text-gray-600">Abzeichen:</b>
									<div className="flex gap-2">
										{event.requiredBadges.map((badge) => (
											<div className="badge badge-secondary badge-outline" key={badge}>
												{badge}
											</div>
										))}
									</div>
								</div>
							)}
						</div>
						<ModalBtn
							user={user}
							event={event}
							title={event.name}
							participant={event.Participants[0]}
							modalId={`${event.name}_modal.${event.id}`}
						/>
					</div>
				</div>
			</div>
		</div>
	);
};