import { Meta, Story } from "@storybook/addon-docs";
import Code from "./assets/code-brackets.svg";
import Colors from "./assets/colors.svg";
import Comments from "./assets/comments.svg";
import Direction from "./assets/direction.svg";
import Flow from "./assets/flow.svg";
import Plugin from "./assets/plugin.svg";
import Repo from "./assets/repo.svg";
import StackAlt from "./assets/stackalt.svg";

import styles from "../styles/Home.module.css";
import ProjectCard from "../components/ProjectCard";

<style>{`
  .tip {
    display: inline-block;
    border-radius: 1em;
    font-size: 11px;
    line-height: 12px;
    font-weight: 700;
    background: #E7FDD8;
    color: #66BF3C;
    padding: 4px 12px;
    margin-right: 10px;
    vertical-align: top;
  }

  .tip-wrapper {
    font-size: 13px;
    line-height: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .tip-wrapper code {
    font-size: 12px;
    display: inline-block;
  }
`}</style>

<Meta title="WWW/Components/ProjectCard" component={ProjectCard} />

export const Template = (args) => (
  <ProjectCard avatarUrl="article_black_48dp.svg" {...args} />
);

a test

<Story
  name="Mockup"
  args={{
    name: "Example Card",
    description: "Example Description",
    mockupUrl: "ltstyle_mockup.svg",
    classNames: "card",
  }}
>
  {Template.bind({})}
</Story>

<Story
  name="Gitea"
  args={{
    name: "Example Gitea Card",
    description: "Example Description",
    // avatarUrl: 'public/article_black_48dp.svg',
    classNames: "card card_gitea",
  }}
>
  {Template.bind({})}
</Story>

<Story
  name="Github"
  args={{
    name: "Example Github Card",
    description: "Example Description",
    // avatarUrl: 'public/article_black_48dp.svg',
    classNames: "card card_github",
  }}
>
  {Template.bind({})}
</Story>

<div className="tip-wrapper">
  <span className="tip">Tip</span>Markdown in{" "}
  <code>src/stories/ProjectCard.stories.mdx</code>
</div>