import docs from "./pn-animated-tile-docs.json";

export default {
  title: 'Components/Animation/Flip',
  parameters: {
    notes: docs,
    layout: 'fullscreen',
  },
};

const FlipDefault = args => {
  return `
  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
    <div style="width:33%">
      <pn-animated-tile data-cat-theme="private" data-cat-firstpage-only="true">
        <div slot="side-a">
          <div style="width:100%;height:100%; display: flex;justify-content: flex-end;align-items: center;">
            <h2 style="color:#fff; font-size:7.2rem; text-align:right;">No <span style="display:block;color:#00A0D6; border-radius:0.4rem; background-color:#fff; padding: 0 0.8rem">side-b</span></h2>
          </div>
        </div>
        <div slot="side-b"></div>
      </pn-animated-tile>
    </div>

    <div style="width:33%">
      <pn-animated-tile data-cat-theme="white" data-cat-firstpage-only="false">
      <div slot="side-a">
        <div style="width:100%;height:100%; display: flex;justify-content: center;align-items: center;">
          <h2 style="color:#FFF; font-size:7.2rem; text-align:right;">Track <span style="color:#F06365; border-radius:0.4rem; background-color:#005D92; padding: 0 0.8rem">shipments</span></h2>
        </div>
      </div>
      <div slot="side-b">
      <div style="display:flex; flex-direction:column; justify-content:center;  overflow-y:scroll; height:100%;">
        <h2 style="color:#FFF; padding:0 0.8rem">Heading</h2>
        <p style="color:#FFF; padding:0 0.8rem">
        Nam interdum urna ipsum, a volutpat tortor iaculis non.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
        Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque.
        Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo.
        Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum.
        Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis.
        Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis.
        Vivamus porta non ex vitae mollis.

        Nam interdum urna ipsum, a volutpat tortor iaculis non.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
        Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque.
        Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo.
        Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum.
        Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis.
        Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis.
        Vivamus porta non ex vitae mollis.

        Nam interdum urna ipsum, a volutpat tortor iaculis non.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
        Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque.
        Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo.
        Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum.
        Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis.
        Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis.
        Vivamus porta non ex vitae mollis.
        Nam interdum urna ipsum, a volutpat tortor iaculis non.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
        Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque.
        Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo.
        Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum.
        Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis.
        Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis.
        Vivamus porta non ex vitae mollis.
        Nam interdum urna ipsum, a volutpat tortor iaculis non.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
        Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque.
        Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo.
        Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum.
        Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis.
        Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis.
        Vivamus porta non ex vitae mollis.
        Nam interdum urna ipsum, a volutpat tortor iaculis non.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
        Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque.
        Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo.
        Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum.
        Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis.
        Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis.
        Vivamus porta non ex vitae mollis.
        </p>
      </div>
      </div>
    </pn-animated-tile>
    </div>

    <div style="width:33%">
      <pn-animated-tile data-cat-theme="hybrid">
        <div slot="side-a"></div>
        <div slot="side-b">
          <div style="display:flex; flex-direction:column; justify-content:center; height:100%;">
            <h2 style="color:#2D2013; padding:0 0.8rem">Heading</h2>
            <p style="color:#2D2013; padding:0 0.8rem">
            Nam interdum urna ipsum, a volutpat tortor iaculis non.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
            Integer sed tortor a justo fermentum sodales. Cras sed posuere lorem, sit amet porttitor neque.
            Nunc tincidunt, tellus eget dapibus dapibus, ligula lorem imperdiet nunc, non aliquet dolor metus id justo.
            Vivamus tempus lacus eu mi convallis, et auctor sapien bibendum.
            Donec non lacus mi. Nulla feugiat, sem quis accumsan aliquet, purus purus tincidunt nisi, a iaculis dolor neque non turpis. In quis nisi turpis.
            Sed sit amet volutpat risus. Praesent arcu dolor, auctor a dictum in, egestas vel augue. Nunc molestie pulvinar mi a convallis.
            Vivamus porta non ex vitae mollis.
            </p>
          </div>
        </div>
      </pn-animated-tile>
    </div>
  </div>
 `;
};

export const Flip = FlipDefault.bind({});
Flip.args = {};
