import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MapOverlay } from './map-overlay';
import { MAP_OVERLAY_POSITIONS } from '../map/map-overlay-position';

const meta: Meta<typeof MapOverlay> = {
  title: 'UI/MapOverlay',
  component: MapOverlay,
  parameters: { layout: 'centered' },
  argTypes: { position: { control: 'select', options: MAP_OVERLAY_POSITIONS } },
};

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

function Surface({ children }: { children: React.ReactNode }) {
  return (
    <div
      className="relative rounded-[var(--radius-card)] border border-border bg-muted"
      style={{ width: 'min(100vw - 48px, 640px)', height: 340 }}
    >
      {children}
    </div>
  );
}

const Chip = ({ children }: { children: React.ReactNode }) => (
  <span className="rounded-[var(--radius)] border border-border bg-background/90 px-2 py-1 text-xs shadow-sm backdrop-blur-sm">
    {children}
  </span>
);

/** One anchor, one overlay. */
export const Default: Story = {
  args: { position: 'top-right', children: <Chip>Conteúdo ancorado</Chip> },
  render: args => (
    <Surface>
      <MapOverlay {...args} />
    </Surface>
  ),
};

/** All nine anchors at once. */
export const AllAnchors: Story = {
  render: () => (
    <Surface>
      {MAP_OVERLAY_POSITIONS.map(position => (
        <MapOverlay key={position} position={position}>
          <Chip>{position}</Chip>
        </MapOverlay>
      ))}
    </Surface>
  ),
};