import type { Meta, StoryObj } from "@storybook/react";
import { UserCard, Button } from "@managemate/react";

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

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

export const Default: Story = {
  args: { name: "Marie Dupont", role: "Lead Developer", initials: "MD", status: "online" },
};

export const Sizes: Story = {
  render: () => (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <UserCard size="sm" name="Sophie Bernard" role="PM" initials="SB" status="online" />
      <UserCard name="Jean Martin" role="Designer · Synapse" initials="JM" status="away" />
      <UserCard size="lg" name="Thomas Legrand" role="DevOps" initials="TL" status="busy" meta="Disponible après 16h" />
    </div>
  ),
};

export const Interactive: Story = {
  args: {
    name: "Lohann Bouveresse",
    role: "CEO",
    initials: "LB",
    status: "online",
    meta: "ceo@managemate.fr",
    href: "#",
    actions: <Button size="sm" variant="ghost" icon="more-2-line" iconOnly aria-label="Actions" />,
  },
};