import { html } from 'lit-html';
import '../kk-tarpaulin.js';

export default {
  title: 'KkTarpaulin',
  component: 'kk-tarpaulin',
  argTypes: {
    title: { control: 'text' },
    counter: { control: 'number' },
    textColor: { control: 'color' },
  },
};

function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
  return html`
    <div style="height: calc(100vh);">
      <kk-tarpaulin
        style="--kk-tarpaulin-text-color: ${textColor || 'black'}"
        .title=${title}
        .counter=${counter}
      >
        ${slot}
      </kk-tarpaulin>
    </div>
  `;
}

export const Regular = Template.bind({});

export const CustomTitle = Template.bind({});
CustomTitle.args = {
  title: 'My title',
};

export const CustomCounter = Template.bind({});
CustomCounter.args = {
  counter: 123456,
};

export const SlottedContent = Template.bind({});
SlottedContent.args = {
  slot: html`<p>Slotted content</p>`,
};
SlottedContent.argTypes = {
  slot: { table: { disable: true } },
};
