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

import {
  Examples,
  Example,
  Note,
  Title,
  VariantsTable,
  VariantColumn,
  RowTitles,
  CustomArgsTable,
} from "@calcom/storybook/components";
import { Icon } from "@calcom/ui";

import { EventDetails } from "./Details";
import { EventMembers } from "./Members";
import { EventTitle } from "./Title";
import { mockEvent } from "./event.mock.ts";

<Meta title="Features/Events/Meta" component={EventDetails} />

<Title title="Event Meta" suffix="Brief" subtitle="Version 2.0 — Last Update: 12 Dec 2022" />

<Examples title="Combined event meta block">
  <div style={{ maxWidth: 300 }}>
    <Example title="Event Title">
      <EventTitle event={mockEvent} />
    </Example>
    <Example title="Event Details">
      <EventDetails event={mockEvent} />
    </Example>
  </div>
</Examples>

<Canvas>
  <Story name="All variants">
    <VariantsTable titles={["Event Meta Components"]} columnMinWidth={150}>
      <VariantRow variant="">
        <div style={{ maxWidth: 300 }}>
          <EventMembers
            users={[
              { name: "Pro example", username: "pro" },
              { name: "Team example", username: "team" },
            ]}
          />
          <EventTitle>Quick catch-up</EventTitle>
          <EventDetails event={mockEvent} />
        </div>
      </VariantRow>
    </VariantsTable>
  </Story>
</Canvas>