import type { Meta, StoryObj } from "@storybook/preact";
import { Overlay } from "./Overlay";
import { useState } from "preact/hooks";

const meta: Meta = { title: "Global/Overlay", parameters: { layout: "fullscreen" } };
export default meta;
type Story = StoryObj;

export const Modal: Story = {
  render: () => {
    const [open, setOpen] = useState(true);
    return (
      <div>
        <button onClick={() => setOpen(true)} class="px-4 py-2 rounded-lg text-sm" style={{ background: "var(--z-accent)", color: "white" }}>Open Modal</button>
        {open && (
          <Overlay onClose={() => setOpen(false)} title="Edit Client">
            <p class="text-sm" style={{ color: "var(--z-muted)" }}>Form content goes here. This is a centered overlay modal with backdrop blur.</p>
          </Overlay>
        )}
      </div>
    );
  },
};

export const SlideIn: Story = {
  render: () => {
    const [open, setOpen] = useState(true);
    return (
      <div>
        <button onClick={() => setOpen(true)} class="px-4 py-2 rounded-lg text-sm" style={{ background: "var(--z-accent)", color: "white" }}>Open Panel</button>
        {open && (
          <Overlay onClose={() => setOpen(false)} mode="slide-in" title="Record Detail">
            <p class="text-sm" style={{ color: "var(--z-muted)" }}>Detail content slides in from the right. The left side dims and clicking it closes the panel.</p>
          </Overlay>
        )}
      </div>
    );
  },
};
