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

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

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

export const Profile: Story = {
  render: () => (
    <HoverCard
      trigger={
        <a href="#" style={{ color: "var(--mmg-color-accent)", fontWeight: 600 }}>
          @marie.dupont
        </a>
      }
    >
      <Inline gap="md">
        <Avatar initials="MD" alt="Marie" size="lg" />
        <div>
          <div style={{ fontWeight: 700 }}>Marie Dupont</div>
          <div style={{ color: "var(--mmg-color-text-tertiary)", fontSize: "var(--mmg-font-size-sm)" }}>Lead Dev · Synapse</div>
          <div style={{ marginTop: 8, fontSize: "var(--mmg-font-size-sm)" }}>
            Lead frontend, mainteneuse du DSMMG.
          </div>
        </div>
      </Inline>
    </HoverCard>
  ),
};

export const Badge_: Story = {
  name: "Badge metadata",
  render: () => (
    <HoverCard trigger={<Badge variant="brand">Synapse v4.2.1</Badge>}>
      <div style={{ fontWeight: 700, marginBottom: 4 }}>Synapse v4.2.1</div>
      <div style={{ color: "var(--mmg-color-text-tertiary)", fontSize: "var(--mmg-font-size-sm)" }}>Sortie le 24 avril 2026</div>
    </HoverCard>
  ),
};