import { IconCalendar } from "@tabler/icons-solidjs";
import type { UserImage } from "../../network";

type Props = {
    item: Extract<UserImage, { type: "event" }>;
};

export const SearchCardEvent = ({ item }: Props) => {
    const { data } = item;

    return (
        <div class="absolute inset-0 p-3 bg-purple-50">
            <div class="flex mb-1 items-center gap-1">
                <IconCalendar size={14} class="text-neutral-500" />
                <p class="text-xs text-neutral-500">Event</p>
            </div>
            <p class="text-sm text-neutral-900 font-bold mb-1">
                {data.Name.length > 0 ? data.Name : "Unknown 🐞"}
            </p>
            <p class="text-xs text-neutral-700">
                Organized by {data.Organizer?.Name ?? "unknown"} on{" "}
                {data.StartDateTime
                    ? new Date(data.StartDateTime).toLocaleDateString("en-US", {
                          month: "long",
                          day: "numeric",
                          year: "numeric",
                      })
                    : "unknown date"}
            </p>
        </div>
    );
};