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

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

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

export const Default: Story = {
  args: {
    name: "Marie Dupont",
    subtitle: "Lead Developer · Synapse",
    bio: "Lead frontend chez ManageMate depuis 2020. Mainteneuse du DSMMG, passionnée d'accessibilité et de motion design fonctionnel.",
    initials: "MD",
    status: "online",
    badges: (
      <>
        <span className="mmg-badge mmg-badge--success">
          <span className="mmg-badge__dot mmg-badge__dot--pulse" />
          Disponible
        </span>
        <span className="mmg-badge mmg-badge--brand">
          <Icon name="shield-check-fill" size="xs" /> Owner DSMMG
        </span>
        <span className="mmg-badge">Frontend · React</span>
      </>
    ),
    actions: (
      <>
        <Button variant="tertiary" icon="message-2-line">Message</Button>
        <Button variant="primary" icon="user-add-line">Suivre</Button>
      </>
    ),
    stats: [
      { label: "Commits", value: "184" },
      { label: "Reviews", value: "23" },
      { label: "Tickets résolus", value: "412" },
      { label: "Ancienneté", value: "5 ans" },
    ],
  },
};