import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import {
  Examples,
  Example,
  Note,
  Title,
  CustomArgsTable,
  VariantsTable,
  VariantRow,
} from "@calcom/storybook/components";

import Card from "./Card";

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

<Title title="Card" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />

## Definition

All Cards used in Cal.com

<CustomArgsTable of={Card} />

export const tip = {
  id: 1,
  thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
  mediaLink: "https://go.cal.com/dynamic-video",
  title: "Dynamic booking links",
  description: "Booking link that allows people to quickly schedule meetings.",
  href: "https://cal.com/blog/cal-v-1-9",
};

<Canvas>
  <Story
    name="Card"
    args={{
      thumbnailUrl: tip.thumbnailUrl,
      mediaLink: tip.mediaLink,
      title: tip.title,
      description: tip.description,
      learnMoreHref: tip.href,
      learnMoreText: "learn more",
    }}
    argTypes={{
      thumbnailUrl: { control: { type: "text" } },
      mediaLink: { control: { type: "text" } },
      title: { control: { type: "text" } },
      description: { control: { type: "text" } },
      learnMoreHref: { control: { type: "text" } },
      learnMoreText: { control: { type: "text" } },
    }}>
    {({ thumbnailUrl, mediaLink, title, description, learnMoreText }) => (
      <VariantsTable titles={[""]} columnMinWidth={150}>
        <VariantRow variant="Sidebar Card">
          <Card
            variant="SidebarCard"
            thumbnailUrl={thumbnailUrl}
            mediaLink={mediaLink}
            title={title}
            description={description}
            learnMore={{ href: tip.href, text: learnMoreText }}
            actionButton={{ onClick: () => console.log("Clicked") }}
          />
        </VariantRow>
      </VariantsTable>
    )}
  </Story>
</Canvas>