import React from "react";
import { Story, Meta } from "@storybook/react";
import { StoryLayout } from "../../../.storybook/StoryComponents";
import { Card } from "./Card";
import { CardDocs } from "./CardDocs";
import { BodyProps, CardProps, FooterProps, HeaderProps } from "./types";

export default {
  title: "Business/Card",
  parameters: {
    docs: {
      page: CardDocs,
    },
  },
  component: Card,
} as Meta;

const headerProps: HeaderProps = {
  img: "https://funart.pro/uploads/posts/2021-04/1618111596_62-p-ochen-milie-kotiki-zhivotnie-krasivo-foto-64.jpg",
};

const bodyProps: BodyProps = {
  title: "Инструменты привлечения физических лиц (ТП)",
  message:
    "Этот курс поможет сформировать знания об основных видах художественных красок и их особенностях, а также сопутствующих товарах для рисования",
};

const footerProps: FooterProps = {
  link: "#",
  linkTitle: "Смотреть курс",
  likesCount: 333,
  commentCount: 11,
  time: 45,
};

export const Default: Story<CardProps> = args => {
  return (
    <StoryLayout>
      <Card year="2022">
        <Card.Header {...headerProps} />
        <Card.Body {...bodyProps} />
        <Card.Footer {...footerProps} />
      </Card>
    </StoryLayout>
  );
};