import type { Meta, StoryObj } from "@storybook/react";
import { Avatar, AvatarGroup } from "@managemate/react";

const meta = {
  title: "Data display/Avatar",
  component: Avatar,
  tags: ["autodocs"],
} satisfies Meta<typeof Avatar>;

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

export const Initials: Story = { args: { initials: "MD", alt: "Marie Dupont" } };
export const Image: Story = { args: { src: "https://i.pravatar.cc/96?u=md", alt: "Marie" } };
export const Sizes: Story = {
  render: () => (
    <div style={{ display: "flex", gap: 12, alignItems: "flex-end" }}>
      <Avatar initials="XS" alt="x" size="xs" />
      <Avatar initials="SM" alt="x" size="sm" />
      <Avatar initials="MD" alt="x" size="md" />
      <Avatar initials="LG" alt="x" size="lg" />
      <Avatar initials="XL" alt="x" size="xl" />
      <Avatar initials="2X" alt="x" size="2xl" />
    </div>
  ),
};
export const Status: Story = {
  render: () => (
    <div style={{ display: "flex", gap: 16 }}>
      <Avatar initials="MD" alt="online" status="online" size="lg" />
      <Avatar initials="JM" alt="away" status="away" size="lg" />
      <Avatar initials="SB" alt="busy" status="busy" size="lg" />
      <Avatar initials="TL" alt="offline" status="offline" size="lg" />
    </div>
  ),
};
export const Square: Story = { args: { initials: "MD", alt: "x", shape: "square", size: "lg" } };

export const Group: Story = {
  render: () => (
    <AvatarGroup
      avatars={[
        { initials: "MD", alt: "Marie" },
        { initials: "JM", alt: "Jean" },
        { initials: "SB", alt: "Sophie" },
        { initials: "TL", alt: "Thomas" },
        { initials: "ER", alt: "Emma" },
      ]}
      max={4}
    />
  ),
};