import React from 'react';
import { Map } from '../ui/map';
import { RouteMap } from '../ui/route-map';

export function ApiKeyMapExample() {
  const [key, setKey] = React.useState('');
  const [appliedKey, setAppliedKey] = React.useState('');

  const handleApply = () => {
    if (key) setAppliedKey(key);
  };

  return (
    <div className="space-y-8 p-6">
      <div className="space-y-4">
        <h2 className="text-2xl font-bold">Map with Explicit API Key</h2>
        <p className="text-muted-foreground">
          Enter a Google Maps API Key to load the maps below. This simulates a scenario where the
          key is provided dynamically or via props, overriding/fallback for the global context.
        </p>

        <div className="flex gap-4 max-w-xl">
          <input
            type="text"
            value={key}
            onChange={e => setKey(e.target.value)}
            placeholder="Enter Google Maps API Key"
            aria-label="Google Maps API Key"
            className="flex-1 px-4 py-2 border rounded-md bg-background"
          />
          <button
            onClick={handleApply}
            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
          >
            Load Maps
          </button>
        </div>
      </div>

      {appliedKey ? (
        <div className="grid md:grid-cols-2 gap-8">
          <div className="space-y-4">
            <h3 className="font-semibold">Standard Map</h3>
            <Map
              apiKey={appliedKey}
              height="400px"
              center={{ lat: -23.5505, lng: -46.6333 }}
              zoom={12}
              markers={[{ position: { lat: -23.5505, lng: -46.6333 }, title: 'São Paulo' }]}
            />
          </div>

          <div className="space-y-4">
            <h3 className="font-semibold">Route Map</h3>
            <RouteMap
              apiKey={appliedKey}
              height="400px"
              origin={{ lat: -23.5505, lng: -46.6333 }}
              destination={{ lat: -23.6005, lng: -46.6833 }}
              travelMode="DRIVING"
            />
          </div>
        </div>
      ) : (
        <div className="p-12 border-2 border-dashed rounded-lg text-center text-muted-foreground">
          Enter an API Key above to render the maps.
        </div>
      )}
    </div>
  );
}