import { Meta, StoryObj } from "@storybook/react"
import { list } from "radash"
import { Facepile } from "./Facepile"

type Story = StoryObj<typeof Facepile>

const AVATARS = [
  {
    seed: "0xd26a6059befc2e1289266a0f438ddceebcd55ac2",
    src: undefined,
  },
  {
    src: "https://lh3.googleusercontent.com/G6ywpOqC1HDpKEKA7jMU5ScfBC3Pak1mRI91N6x9-UO6lXpR1SbFOdwG4kEGwu10pNcfgil0pSDIyCJfWHi_LARlFhCrlF39w6EL",
  },
  {
    seed: "0x582ca95090832d39f93be2e6b91978a48cf4fe04",
    src: undefined,
  },
]

const meta: Meta<typeof Facepile> = {
  title: "Design System/Facepile",
  component: Facepile,
  args: {
    avatars: AVATARS,
  },
}

export default meta

export const Default: Story = {}

export const WithSizeOverride: Story = {
  args: {
    avatars: AVATARS,
    overrides: {
      Avatar: {
        size: 100,
      },
    },
    overlapMargin: 33,
  },
}

export const WithDisplayLimit: Story = {
  args: {
    avatars: AVATARS,
    displayLimit: 1,
  },
}

export const ManyAvatars: Story = {
  args: {
    avatars: list(200).map(i => ({
      seed: `0x${i.toString(16)}`,
      src: undefined,
    })),
  },
}

export const SlightlyRounded: Story = {
  args: {
    avatars: AVATARS,
    displayLimit: 2,
    overrides: {
      Avatar: {
        className: "rounded",
      },
    },
  },
}