import SectionHeader from "../../app/components/type/SectionHeader";

export default {
  title: "Components/Type/SectionHeader",
  component: SectionHeader,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "Figma Type / SectionHeader ([17411:10981](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17411-10981)). Title + subtitle with responsive typography: stacked on small screens, split row from lg. **`default`**: top-aligned row; **`multi-line`**: vertically centered row on large screens (subtitle vs. title). Optional **`stackedDesktopLines`** for three-line desktop titles (CardSteps).",
      },
    },
  },
  argTypes: {
    title: {
      control: { type: "text" },
      description: "Title for small viewports (and mobile/stacked layout)",
    },
    subtitle: {
      control: { type: "text" },
      description: "Subtitle / supporting copy",
    },
    titleLg: {
      control: { type: "text" },
      description:
        "Optional single-line title from lg up (when `stackedDesktopLines` is not set)",
    },
    variant: {
      control: { type: "select" },
      options: ["default", "multi-line"],
      description: "Layout variant (Figma 1-line vs 3-line row behavior)",
    },
  },
  tags: ["autodocs"],
};

export const Default = {
  args: {
    title: "How CommunityRule works",
    subtitle: "Here's a quick overview of the process, from start to finish.",
    titleLg: "How CommunityRule helps",
    variant: "default",
  },
};

export const MultiLine = {
  args: {
    title: "Popular templates",
    subtitle:
      "These are popular patterns for making decisions in mutual aid and open source communities. You can use them as they are or as a starting place for customizing your own CommunityRule.",
    variant: "multi-line",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Used in **RuleStack**: 50/50 row from lg with subtitle vertically centered against the title block.",
      },
    },
  },
};

export const MultiLineStackedTitle = {
  args: {
    title: "How CommunityRule works",
    subtitle: "Here's a quick overview of the process, from start to finish.",
    variant: "multi-line",
    stackedDesktopLines: ["How", "CommunityRule", "helps"],
  },
  parameters: {
    docs: {
      description: {
        story:
          "Used in **CardSteps**: three-line Bricolage lockup on large screens with `stackedDesktopLines`.",
      },
    },
  },
};

export const CustomContent = {
  args: {
    title: "Our Mission",
    subtitle:
      "We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",
    titleLg: "Building Better Communities",
    variant: "default",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Example with custom content to show the flexibility of the component.",
      },
    },
  },
};

export const LongSubtitle = {
  args: {
    title: "Complex Process",
    subtitle:
      "This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",
    titleLg: "Complex Process Simplified",
    variant: "default",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Demonstrates how the component handles longer subtitle text across different breakpoints.",
      },
    },
  },
};

export const ResponsiveTest = {
  args: {
    title: "Responsive Design",
    subtitle:
      "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
    titleLg: "Responsive Design Test",
    variant: "default",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
      },
    },
  },
};

export const WithoutTitleLg = {
  args: {
    title: "Simple Header",
    subtitle:
      "This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints.",
    variant: "default",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Shows the component without a titleLg prop, demonstrating the fallback behavior.",
      },
    },
  },
};

export const MultiLineResponsive = {
  args: {
    title: "Multi-line Responsive Test",
    subtitle:
      "This multi-line variant demonstrates the 50/50 split layout at larger breakpoints. Resize your browser to see how the layout adapts from stacked on mobile to side-by-side on desktop.",
    variant: "multi-line",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Test the responsive behavior of the multi-line variant. The layout changes from stacked on mobile to 50/50 split on lg and xl breakpoints.",
      },
    },
  },
};
