import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MapScaleBar } from './map-scale-bar';

const meta: Meta<typeof MapScaleBar> = {
  title: 'UI/MapScaleBar',
  component: MapScaleBar,
  parameters: { layout: 'centered' },
  argTypes: {
    metersPerPixel: { control: { type: 'range', min: 0.1, max: 500, step: 0.1 } },
    units: { control: 'inline-radio', options: ['metric', 'imperial'] },
  },
  render: args => (
    <div
      className="relative rounded-[var(--radius-card)] border border-border bg-muted"
      style={{ width: 'min(100vw - 48px, 520px)', height: 200 }}
    >
      <MapScaleBar {...args} />
    </div>
  ),
};

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

/** Roughly city zoom. */
export const Metric: Story = { args: { metersPerPixel: 12, units: 'metric' } };

/** Roughly state zoom — the bar picks kilometres on its own. */
export const RegionalZoom: Story = { args: { metersPerPixel: 220, units: 'metric' } };

export const Imperial: Story = { args: { metersPerPixel: 12, units: 'imperial' } };