import React from 'react';
import { Map, MapProps } from '../map';

/**
 * SimpleMap - Simplified wrapper for common map use cases.
 *
 * @description
 * Use this component when you need a basic map without advanced configuration.
 * For complex scenarios (custom polygons, circles, event handlers), use `<Map>` directly.
 *
 * @ai-rules
 * 1. Always provide `center={{ lat, lng }}` — the map will not render without a center point.
 * 2. Use `showMarker={false}` for view-only maps (no interactive pin).
 * 3. For multiple markers or route rendering, use `<Map>` directly instead.
 */

export interface SimpleMapProps extends Omit<MapProps, 'markers' | 'circle' | 'polygon'> {
  /** Address or location name to display in the marker info window */
  address?: string;
  /** Title displayed on the map marker */
  markerTitle?: string;
  /** Additional info shown in the marker InfoWindow */
  markerInfo?: string;
  /** Whether to render a marker at the center coordinate */
  showMarker?: boolean;
}

export const SimpleMap = React.forwardRef<HTMLDivElement, SimpleMapProps>(
  (
    {
      center,
      address,
      markerTitle,
      markerInfo,
      showMarker = true,
      zoom = 15,
      height = '350px',
      ...props
    },
    ref
  ) => {
    // Automatically create a marker if showMarker is true
    const markers =
      showMarker && center
        ? [
            {
              position: center,
              title: markerTitle || address || 'Location',
              info: markerInfo || address,
            },
          ]
        : [];

    return (
      <Map ref={ref} center={center} zoom={zoom} height={height} markers={markers} {...props} />
    );
  }
);

SimpleMap.displayName = 'SimpleMap';

/**
 * USAGE EXAMPLES:
 *
 * 1. Simple Map with Marker:
 * ```tsx
 * <SimpleMap
 *   center={{ lat: -23.5505, lng: -46.6333 }}
 *   markerTitle="Head Office"
 *   markerInfo="Paulista Avenue, 1000"
 * />
 * ```
 *
 * 2. Map Without Marker (view only):
 * ```tsx
 * <SimpleMap
 *   center={{ lat: -23.5505, lng: -46.6333 }}
 *   showMarker={false}
 *   zoom={10}
 * />
 * ```
 *
 * 3. Store Location Map:
 * ```tsx
 * <SimpleMap
 *   center={{ lat: -23.5505, lng: -46.6333 }}
 *   address="Augusta Street, 2000 - São Paulo"
 *   zoom={16}
 *   height="400px"
 * />
 * ```
 */