"use client";

import type { ReactNode } from "react";
import type { Locale } from "date-fns";

import { cn } from "@/lib/utils";
import { Typography } from "@/components/ui/typography";

import { DEFAULT_EVENT_COLOR, EVENT_COLOR_CLASSES } from "./constants";
import type { CalendarEvent } from "./types";

interface EventChipProps<TMeta> {
  event: CalendarEvent<TMeta>;
  locale: Locale;
  onClick: (event: CalendarEvent<TMeta>) => void;
  renderEvent?: (event: CalendarEvent<TMeta>) => ReactNode;
}

/**
 * Compact month-cell chip: a color dot + title. Time/details live in the
 * detail dialog to keep month cells readable at any width.
 */
export function EventChip<TMeta>({
  event,
  onClick,
  renderEvent,
}: EventChipProps<TMeta>) {
  const color = EVENT_COLOR_CLASSES[event.color ?? DEFAULT_EVENT_COLOR];

  return (
    <button
      type="button"
      title={event.title}
      onClick={(e) => {
        e.stopPropagation();
        onClick(event);
      }}
      className="flex w-full items-center gap-1.5 rounded-md px-1 py-0.5 text-start hover:bg-muted"
    >
      {renderEvent ? (
        renderEvent(event)
      ) : (
        <>
          <span
            className={cn("size-1.5 shrink-0 rounded-full", color.dot)}
            aria-hidden
          />
          <Typography as="span" variant="caption" className="truncate">
            {event.title}
          </Typography>
        </>
      )}
    </button>
  );
}