"use client";
import type { ReactNode } from "react";
import { cn } from "~/lib/utils";

interface MapMarkerProps {
	label: ReactNode;
	color?: keyof typeof colorClasses;
	className?: string;
	size?: keyof typeof sizeClasses;
}
const colorClasses = {
	blue: {
		rectangle: "bg-blue-500 text-white",
		triangle: "border-t-blue-500",
	},
	gray: {
		rectangle: "bg-gray-500 text-white",
		triangle: "border-t-gray-500",
	},
	green: {
		rectangle: "bg-green-500 text-white",
		triangle: "border-t-green-500",
	},
	primary: {
		rectangle: "bg-[#242428] text-white",
		triangle: "border-t-[#242428]",
	},
	purple: {
		rectangle: "bg-purple-500 text-white",
		triangle: "border-t-purple-500",
	},
	red: {
		rectangle: "bg-red-500 text-white",
		triangle: "border-t-red-500",
	},
	yellow: {
		rectangle: "bg-yellow-500 text-black",
		triangle: "border-t-yellow-500",
	},
	orange: {
		rectangle: "bg-orange-500 text-white",
		triangle: "border-t-orange-500",
	},
} as const;
const sizeClasses = {
	lg: {
		container: "h-16",
		rectangle: "px-4 py-3 rounded-xl",
		text: "text-base",
		triangle: "border-l-[12px] border-r-[12px] border-t-[20px]",
	},
	md: {
		container: "h-12",
		rectangle: "px-3 py-2 rounded-lg",
		text: "text-sm",
		triangle: "border-l-[10px] border-r-[10px] border-t-[16px]",
	},
	sm: {
		container: "h-8",
		rectangle: "px-2 py-1 rounded-md",
		text: "text-xs",
		triangle: "border-l-[8px] border-r-[8px] border-t-[15px]",
	},
} as const;

export default function MapMarker({
	label,
	color = "primary",
	className,
	size = "md",
}: MapMarkerProps) {
	return (
		<div
			className={cn(
				"inline-flex -translate-y-[60%] flex-col items-center",
				sizeClasses[size].container,
				className,
			)}
		>
			{/* Rectangle part */}
			<div
				className={cn(
					"flex items-center justify-center font-medium text-primary-foreground",
					sizeClasses[size].rectangle,
					colorClasses[color].rectangle,
				)}
			>
				<span className={sizeClasses[size].text}>{label}</span>
			</div>

			{/* Triangle part */}
			<div
				className={cn(
					"-mt-px h-0 w-0 border-transparent border-solid",
					sizeClasses[size].triangle,
					colorClasses[color].triangle,
				)}
			/>
		</div>
	);
}
