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

const meta = {
  title: "Theming/ThemePicker",
  component: ThemePicker,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "Sélecteur de couleur d'accent utilisateur. Pattern radiogroup avec navigation flèches, persistance localStorage. 9 presets validés AA.",
      },
    },
  },
} satisfies Meta<typeof ThemePicker>;

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

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

export const InCard: Story = {
  render: () => (
    <Card style={{ maxWidth: 420 }}>
      <h3>Préférences d'apparence</h3>
      <p style={{ color: "var(--mmg-color-text-tertiary)", fontSize: "var(--mmg-font-size-sm)", marginBottom: 16 }}>
        Choisissez la couleur d'accent qui vous convient. Cette préférence est sauvegardée localement.
      </p>
      <ThemePicker legend="Couleur d'accent" />
      <div style={{ marginTop: 24, display: "flex", gap: 8 }}>
        <Button variant="primary">Bouton primary</Button>
        <Button variant="tonal">Bouton tonal</Button>
      </div>
    </Card>
  ),
};

export const HiddenReset: Story = {
  render: () => <ThemePicker hideReset />,
};