import type { Meta, StoryObj } from '@storybook/react';
import { RouteMap } from './route-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 RouteMap> = {
  title: 'UI/RouteMap',
  component: RouteMap,
  render: args => (
    <MapStoryFrame>
      <RouteMap {...args} />
    </MapStoryFrame>
  ),
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    travelMode: {
      control: 'select',
      options: ['DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'],
    },
    height: { control: 'text' },
  },
};

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

export const Default: Story = {
  args: {
    origin: { lat: -23.5505, lng: -46.6333 },
    destination: { lat: -23.5617, lng: -46.656 },
    height: '400px',
    onRouteCalculated: (dist, dur) => console.log(`Distance: ${dist}, Duration: ${dur}`),
  },
};

export const WithWaypoints: Story = {
  args: {
    origin: { lat: -23.5505, lng: -46.6333 },
    destination: { lat: -23.5617, lng: -46.656 },
    waypoints: [{ lat: -23.555, lng: -46.645 }],
    height: '500px',
  },
};