"use client";

// Status color constants — kept in sync with EntryMap marker colours
export const STATUS_COLORS: Record<string, string> = {
  free: "#0A7A3A",
  in_progress: "#9A6700",
  favorite: "#1D4ED8",
};

export const STATUS_LABELS: Record<string, string> = {
  free: "Свободный",
  in_progress: "В работе",
  favorite: "Избранный",
};

export function ParcelLegend() {
  const entries = Object.keys(STATUS_LABELS) as Array<
    keyof typeof STATUS_LABELS
  >;

  return (
    <div
      style={{
        background: "var(--bg-card)",
        border: "1px solid var(--border-card)",
        borderRadius: 8,
        padding: "8px 12px",
        display: "flex",
        flexDirection: "column",
        gap: 6,
        minWidth: 148,
      }}
    >
      <span
        style={{
          fontSize: 11,
          fontWeight: 500,
          textTransform: "uppercase",
          letterSpacing: "0.04em",
          color: "var(--fg-secondary)",
        }}
      >
        Статус участка
      </span>
      {entries.map((status) => (
        <div
          key={status}
          style={{ display: "flex", alignItems: "center", gap: 8 }}
        >
          <span
            style={{
              width: 12,
              height: 12,
              borderRadius: "50%",
              background: STATUS_COLORS[status],
              flexShrink: 0,
              display: "inline-block",
            }}
          />
          <span style={{ fontSize: 12, color: "var(--fg-primary)" }}>
            {STATUS_LABELS[status]}
          </span>
        </div>
      ))}
    </div>
  );
}