import React from "react";
import { EventDescriptionCard } from "./EventDescriptionCard";

import styles from "./playground.module.css";

import AfterHoursContent, {
  metadata as afterHoursMetadata,
} from "../content/playground/after-hours.event.mdx";
import UnavailableContent, {
  metadata as unavailableMetadata,
} from "../content/playground/unavailable.news.mdx";

import { MiniEventCard } from "./MiniEventCard";
import { NewsCard } from "./NewsCard";

export function MiniEventCardDemo() {
  const { name, location, short, date } = afterHoursMetadata;

  const dateString = date.toLocaleDateString("en-US", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });
  const timeString = date.toLocaleTimeString("en-US", {
    hour: "numeric",
    minute: "numeric",
  });

  return (
    <div className={styles.miniEventCardDemo}>
      <MiniEventCard
        name={name}
        date={dateString}
        time={timeString}
        descriptionShort={short}
        location={location}
        description={<AfterHoursContent />}
      />
      <MiniEventCard
        name={name}
        date={dateString}
        time={timeString}
        descriptionShort={short}
        location={location}
        description={<AfterHoursContent />}
      />
      <MiniEventCard
        name={name}
        date={dateString}
        time={timeString}
        descriptionShort={short}
        location={location}
        description={<AfterHoursContent />}
      />
    </div>
  );
}

export function NewsCardDemo() {
  return (
    <div className={styles.news}>
      <div className={styles.newsTitle}>News</div>
      <div className={styles.newsDesc}>
        Updates from our execs
        <br />
        <br />
      </div>
      <hr className={styles.newsHr} />
      <NewsCard {...unavailableMetadata}>
        <UnavailableContent />
      </NewsCard>
    </div>
  );
}

export function EventDescriptionCardDemo() {
  const { name, short, date } = afterHoursMetadata;

  return (
    <div className={styles.eventDescriptionCardDemo}>
      <EventDescriptionCard
        name={name}
        date={date}
        online={true}
        location="Twitch"
        poster="images/playground/intro-ootb.jpg"
        registerLink="/"
      >
        <p>{short}</p>
      </EventDescriptionCard>
      <EventDescriptionCard
        name={name}
        date={date}
        online={true}
        location="Twitch"
        poster="images/playground/alt-tab.jpg"
        registerLink="/"
      >
        <p>{short}</p>
      </EventDescriptionCard>
      <EventDescriptionCard
        name={name}
        date={date}
        online={true}
        location="Twitch"
        poster="images/playground/intro-ootb.jpg"
        registerLink="/"
      >
        <p>{short}</p>
      </EventDescriptionCard>
    </div>
  );
}