import type { Meta, StoryObj } from '@storybook/react';
import { Map } from './map';
import React from 'react';

function MapStoryFrame({ children }: { children: React.ReactNode }) {
  return (
    <div
      style={{
        width: 'min(100vw - 48px, 960px)',
        minWidth: 320,
      }}
    >
      {children}
    </div>
  );
}

const meta: Meta<typeof Map> = {
  title: 'UI/Map',
  component: Map,
  render: args => (
    <MapStoryFrame>
      <Map {...args} />
    </MapStoryFrame>
  ),
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    zoom: { control: { type: 'range', min: 1, max: 20 } },
    height: { control: 'text' },
  },
};

export default meta;
type Story = StoryObj<typeof Map>;

export const Default: Story = {
  args: {
    center: { lat: -23.5505, lng: -46.6333 },
    zoom: 12,
    height: '400px',
  },
  render: args => (
    <MapStoryFrame>
      <Map {...args} />
    </MapStoryFrame>
  ),
};

export const WithMarkers: Story = {
  args: {
    center: { lat: -23.5505, lng: -46.6333 },
    zoom: 13,
    height: '500px',
    markers: [
      {
        position: { lat: -23.5505, lng: -46.6333 },
        title: 'São Paulo Center',
        info: 'The heart of the city',
      },
      {
        position: { lat: -23.5605, lng: -46.6433 },
        title: 'Avenida Paulista',
        info: 'Financial and cultural hub',
        customColor: 'hsl(var(--destructive))',
      },
    ],
  },
  render: args => (
    <MapStoryFrame>
      <Map {...args} />
    </MapStoryFrame>
  ),
};

export const NoKey: Story = {
  args: {
    apiKey: '',
  },
  render: args => (
    <MapStoryFrame>
      <Map {...args} />
    </MapStoryFrame>
  ),
};