import { TemplateResult, html } from "lit";

import "../src/pendor-clock.js";

export default {
    title: "PendorClock",
    component: "pendor-clock",
    argTypes: {
        title: { control: "text" },
        counter: { control: "number" },
        textColor: { control: "color" },
    },
};

interface Story<T> {
    (args: T): TemplateResult;
    args?: Partial<T>;
    argTypes?: Record<string, unknown>;
}

interface ArgTypes {
    title?: string;
    counter?: number;
    textColor?: string;
    slot?: TemplateResult;
}

const Template: Story<ArgTypes> = ({
    title = "Hello world",
    counter = 5,
    textColor,
    slot,
}: ArgTypes) => html`
    <pendor-clock
        style="--pendor-clock-text-color: ${textColor || "black"}"
        .title=${title}
        .counter=${counter}
    >
        ${slot}
    </pendor-clock>
`;

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 } },
};