import React, { useState } from "react";
import Share from "../../app/components/modals/Share";

/** Figma: Modal / Share — node 22073-30884 (Community Rule System). */
export default {
  title: "Components/Modals/Share",
  component: Share,
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component:
          "Share modal for published rules (copy link and channel actions).",
      },
    },
  },
};

function ShareStoryHost() {
  const [open, setOpen] = useState(true);
  return (
    <div className="min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)] p-6">
      <button
        type="button"
        className="rounded-md bg-[var(--color-surface-default-primary)] px-4 py-2 text-small-paragraph text-[var(--color-content-default-primary)]"
        onClick={() => setOpen(true)}
      >
        Open Share
      </button>
      <Share
        isOpen={open}
        onClose={() => setOpen(false)}
        onCopyLink={() => {}}
        onEmailShare={() => {}}
        onSignalShare={() => {}}
        onSlackShare={() => {}}
        onDiscordShare={() => {}}
      />
    </div>
  );
}

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