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

const meta = {
  title: "Feedback/Toast",
  tags: ["autodocs"],
  decorators: [(Story) => <ToastProvider position="bottom-right" max={5}><Story /></ToastProvider>],
} satisfies Meta;

export default meta;
type Story = StoryObj;

function Trigger() {
  const { toast } = useToast();
  return (
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
      <Button variant="success" onClick={() => toast({ title: "Sauvegardé", description: "Vos modifs ont été enregistrées.", severity: "success" })}>Success</Button>
      <Button variant="tonal"   onClick={() => toast({ title: "Maintenance prévue dimanche", severity: "info" })}>Info</Button>
      <Button variant="ghost"   onClick={() => toast({ title: "Quota presque atteint", description: "85% du stockage utilisé.", severity: "warning" })}>Warning</Button>
      <Button variant="danger"  onClick={() => toast({ title: "Échec de la synchronisation", severity: "danger", duration: 0 })}>Danger</Button>
      <Button variant="primary" icon="stack-line" onClick={() => {
        const msgs = [
          { title: "Bulletin Marie", description: "2 850 €", severity: "success" as const },
          { title: "Bulletin Jean", description: "2 200 €", severity: "success" as const },
          { title: "Bulletin Sophie", description: "3 400 €", severity: "success" as const },
          { title: "Bulletin Thomas", description: "2 900 €", severity: "success" as const },
          { title: "Bulletin Emma", description: "1 950 €", severity: "success" as const },
        ];
        msgs.forEach((m, i) => setTimeout(() => toast(m), i * 220));
      }}>Empiler 5 toasts</Button>
    </div>
  );
}

export const Default: Story = { render: () => <Trigger /> };