import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Col } from 'components/layout';
import { Button } from 'components/button';
import { ArrowRight } from 'icons';
import { Heading } from './index';

export default {
  title: 'App Components/Heading',
  component: Heading,
} as ComponentMeta<typeof Heading>;

const Template: ComponentStory<typeof Heading> = () => {
  return <Heading title="My Spaces" isAction action={<ArrowRight />} />;
};

export const Interactive = Template.bind({});
Interactive.args = {};
const headings = [
  { title: 'My Spaces', badge: 14, isAction: true },
  { title: 'My Rooms', badge: 6, isAction: true },
  { title: 'Upcoming ', isAction: false },
  {
    title: 'Happening Now ',
    isAction: true,
    action: (
      <Button
        sizeVariant="small"
        onPress={() => {}}
        colorVariant="primary"
        titleColor="white"
        title="Refresh"
      />
    ),
  },
];
export const Variants: ComponentStory<typeof Heading> = () => {
  return (
    <>
      <Col>
        {headings.map((heading) => (
          <Heading
            mt="s"
            title={heading.title}
            badge={heading.badge}
            isAction={heading.isAction}
            action={heading.action}
          />
        ))}
      </Col>
    </>
  );
};

Variants.args = {};