import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
import Card from "../Card";
import { Link, UnstyledList, UnstyledListItem, createComponentTemplate } from "../../../storybook";

import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";

import {
  femaleIcon,
  guest,
  home,
  maleIcon,
  minus,
  owner,
  person1,
  person2,
  person3,
  avatar1,
  avatar2,
  avatar3,
  avatar4
} from "../../Avatar/__stories__/assets";

import defaultImg from "./assets/defaultImg.png";
import mainImg from "./assets/mainImg.png";

<Meta title="Card" component={Card} />

<!--- Component template -->

export const cardTemplate = createComponentTemplate(Card);

<!--- Component documentation -->

# Card

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Variants

### Simple with image

<Canvas>
  <Story name="Simple">
    <div
      style={{
        width: "650px",
        height: "450px"
      }}
    >
      <Card
        title="Cover Background"
        description="Customize the look and feel of your collection with any sort of media, we support video, images and gif."
        defaultImage={defaultImg}
        image={mainImg}
        textColor="rgba(255, 255, 255, 0.6)"
      />
    </div>
  </Story>
</Canvas>

### With Button

<Canvas>
  <Story name="With Button">
    <div
      style={{
        width: "400px",
        height: "300px"
      }}
    >
      <Card
        title="Cover Background"
        hasButton={true}
        onButtonClick={() => {}}
        defaultImage={defaultImg}
        image={mainImg}
        textColor="rgba(255, 255, 255, 0.6)"
      />
    </div>
    <div
      style={{
        width: "400px",
        height: "300px"
      }}
    >
      <Card
        title="Cover Background"
        twoButton={true}
        defaultImage={defaultImg}
        description="Customize the look and feel of your collection with any sort of media, we support video, images and gif."
        textColor="rgba(255, 255, 255, 0.6)"
      />
    </div>
  </Story>
</Canvas>

### With Avatar

<Canvas>
  <Story name="With Avatar">
    <div
      style={{
        width: "400px",
        height: "300px"
      }}
    >
      <Card
        avatarSrc={person1}
        title="Cover Background"
        description="Customize the look and feel of your collection with any sort of media, we support video, images and gif."
        defaultImage={defaultImg}
        textColor="rgba(255, 255, 255, 0.6)"
      />
    </div>
    <div
      style={{
        width: "400px",
        height: "300px"
      }}
    >
      <Card
        avatarSrc={person1}
        hasButton={true}
        title="Cover Background"
        description="Customize the look and feel of  your collection with any sort of media, we support video, images and gif."
        defaultImage={defaultImg}
        textColor="rgba(255, 255, 255, 0.6)"
      />
    </div>
  </Story>
</Canvas>
