import type { Meta, StoryObj } from '@storybook/react';
import Box from '@mui/material/Box';
import { ClusterMarker } from './ClusterMarker';

const meta: Meta<typeof ClusterMarker> = {
  title: 'Atoms/ClusterMarker',
  component: ClusterMarker,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    backgrounds: {
      default: 'map',
      values: [{ name: 'map', value: '#E5E3DF' }],
    },
  },
  argTypes: {
    onClick: { action: 'clicked' },
  },
};

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

/** Cluster containing at least one verified provider — promoted palette */
export const MixedOrVerified: Story = {
  args: {
    count: 5,
    hasVerified: true,
  },
};

/** Cluster of all-unverified providers — neutral palette */
export const AllUnverified: Story = {
  args: {
    count: 3,
    hasVerified: false,
  },
};

/** Small cluster — pair of providers */
export const Pair: Story = {
  args: {
    count: 2,
    hasVerified: true,
  },
};

/** Large cluster — double-digit count */
export const LargeCluster: Story = {
  args: {
    count: 27,
    hasVerified: true,
  },
};

/** Side-by-side comparison — verified vs unverified at various counts */
export const PaletteGrid: Story = {
  render: () => (
    <Box
      sx={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 6,
        p: 4,
      }}
    >
      <ClusterMarker count={2} hasVerified />
      <ClusterMarker count={5} hasVerified />
      <ClusterMarker count={12} hasVerified />
      <ClusterMarker count={99} hasVerified />
      <ClusterMarker count={2} />
      <ClusterMarker count={5} />
      <ClusterMarker count={12} />
      <ClusterMarker count={99} />
    </Box>
  ),
};
