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

interface MapMarkerProps {
	label: ReactNode;
	color?: "primary" | "red" | "blue" | "green" | "yellow" | "purple" | "gray";
	className?: string;
	size?: "sm" | "md" | "lg";
}

export default function MapMarker({
	label,
	color = "primary",
	className,
	size = "md",
}: MapMarkerProps) {
	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",
		},
	};

	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-[12px]",
		},
		md: {
			container: "h-12",
			rectangle: "px-3 py-2 rounded-lg",
			text: "text-sm",
			triangle: "border-l-[10px] border-r-[10px] border-t-[10px]",
		},
		sm: {
			container: "h-8",
			rectangle: "px-2 py-1 rounded-md",
			text: "text-xs",
			triangle: "border-l-[8px] border-r-[8px] border-t-[8px]",
		},
	};

	return (
		<div
			className={cn(
				"inline-flex 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(
					"h-0 w-0 border-transparent border-solid",
					sizeClasses[size].triangle,
					colorClasses[color].triangle,
				)}
			/>
		</div>
	);
}
