import type { Meta, StoryObj } from '@storybook/react';
import { SimpleMap } from './simple-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 SimpleMap> = {
  title: 'UI/SimpleMap',
  component: SimpleMap,
  render: args => (
    <MapStoryFrame>
      <SimpleMap {...args} />
    </MapStoryFrame>
  ),
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    zoom: { control: { type: 'range', min: 1, max: 20 } },
    height: { control: 'text' },
  },
};

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

export const Default: Story = {
  args: {
    center: { lat: -23.5505, lng: -46.6333 },
    markerTitle: 'Central Office',
    markerInfo: 'Paulista Ave, 1000',
    zoom: 15,
  },
};

export const WithoutMarker: Story = {
  args: {
    center: { lat: -23.5505, lng: -46.6333 },
    showMarker: false,
    zoom: 12,
  },
};