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

const meta: Meta<typeof MapNotice> = {
  title: 'UI/MapNotice',
  component: MapNotice,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    variant: { control: 'inline-radio', options: ['info', 'warning', 'synthetic'] },
    layout: { control: 'inline-radio', options: ['overlay', 'inline'] },
  },
  render: args => (
    <div
      className="relative rounded-[var(--radius-card)] border border-border bg-muted"
      style={{ width: 'min(100vw - 48px, 560px)', height: 240 }}
    >
      <MapNotice {...args} />
    </div>
  ),
};

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

/** Provenance seal for demonstrative or generated data. */
export const Synthetic: Story = {
  args: {
    variant: 'synthetic',
    position: 'top-right',
    children: 'Dados demonstrativos',
  },
};

/** Neutral context that is not a problem the user can act on. */
export const Info: Story = {
  args: {
    variant: 'info',
    position: 'top-left',
    children: 'Posições agregadas por centroide municipal',
  },
};

/** A real caveat about the data on screen. */
export const Warning: Story = {
  args: {
    variant: 'warning',
    position: 'top-center',
    children: 'Cobertura parcial — 3 municípios sem envio',
  },
};

/** Flowing in normal layout, for captions placed under the map. */
export const Inline: Story = {
  render: args => (
    <div style={{ width: 'min(100vw - 48px, 560px)' }}>
      <MapNotice {...args} />
    </div>
  ),
  args: {
    layout: 'inline',
    variant: 'synthetic',
    children: 'Dados demonstrativos',
  },
};