import { html, TemplateResult } from 'lit';
import '../src/fridge-magnets.js';

export default {
  title: 'FridgeMagnets',
  component: 'fridge-magnets',
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

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

interface ArgTypes {
  header?: string;
  backgroundColor?: string;
}

const Template: Story<ArgTypes> = ({ header, backgroundColor = 'white' }: ArgTypes) => html`
  <fridge-magnets style="--fridge-magnets-background-color: ${backgroundColor}" .header=${header}></fridge-magnets>
`;

export const App = Template.bind({});
App.args = {
  header: 'My app',
};