'use client';

import { Info } from 'lucide-react';
import * as React from 'react';

interface OsmMapLegendProps {
  includeOsmRaw: boolean;
  onToggleOsmRaw: (value: boolean) => void;
  /** Smaller variant for the split-view sidebar. */
  compact?: boolean;
}

/**
 * Legend + toggle that sits above the bbox map. Explains the two marker
 * colors (curated vs raw OSM) and lets the user opt into showing the
 * un-reviewed OpenStreetMap imports.
 */
export function OsmMapLegend({
  includeOsmRaw,
  onToggleOsmRaw,
  compact = false,
}: OsmMapLegendProps) {
  return (
    <div
      className={`flex flex-wrap items-center gap-3 rounded-lg border bg-card ${
        compact ? 'px-3 py-2 text-xs' : 'px-4 py-2.5 text-sm'
      }`}
      role="group"
      aria-label="Chú giải bản đồ KCN"
    >
      <div className="flex items-center gap-1.5">
        <span
          className="inline-block h-3 w-3 rounded-full border-2 border-white shadow"
          style={{ backgroundColor: '#22c55e' }}
          aria-hidden="true"
        />
        <span className="text-foreground">KCN đã xác minh</span>
      </div>
      <div className="flex items-center gap-1.5">
        <span
          className="inline-block h-3 w-3 rounded-full border-2 border-white shadow opacity-70"
          style={{ backgroundColor: '#f59e0b' }}
          aria-hidden="true"
        />
        <span className="text-foreground">KCN từ OpenStreetMap (chưa duyệt)</span>
      </div>

      <label className="ml-auto flex cursor-pointer items-center gap-1.5 select-none">
        <input
          type="checkbox"
          checked={includeOsmRaw}
          onChange={(e) => onToggleOsmRaw(e.target.checked)}
          className="rounded border-border"
        />
        <span>Hiển thị KCN OSM</span>
      </label>

      {includeOsmRaw && !compact && (
        <p className="flex w-full items-center gap-1.5 border-t border-border pt-2 text-xs text-muted-foreground">
          <Info className="h-3 w-3 shrink-0" />
          KCN màu vàng là dữ liệu thô từ OpenStreetMap, chưa được kiểm duyệt — thông tin có thể chưa
          chính xác hoặc thiếu.
        </p>
      )}
    </div>
  );
}