import React, { ReactElement } from "react";
import styles from "./MiniEventCard.module.css";

interface EventProps {
  title: string;
  descriptionShort: string;
  descriptionLong: ReactElement;
  location: string;
  date: string;
  time: string;
}

const dropDownIcon = (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="14"
    height="9"
    viewBox="0 0 14 9"
    fill="none"
    className={styles.dropDownIcon}
  >
    <path
      d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
      fill="#1482E3"
    />
  </svg>
);

export const MiniEventCard: React.FC<EventProps> = ({
  title,
  descriptionShort,
  descriptionLong,
  location,
  date,
  time,
}) => {
  return (
    <details className={styles.miniEventCard}>
      <summary>
        <div onClick={(event) => event.preventDefault()}>
          <h2 className={styles.eventTitle}>{title}</h2>
          <p className={styles.eventInfo}>
            {location} | {date} | {time}
          </p>
          <p className={styles.shortDescription}>{descriptionShort}</p>
        </div>

        <p className={styles.details}>
          View details <DropDownIcon />
        </p>
      </summary>

      <p className={styles.longDescription}>{descriptionLong}</p>
    </details>
  );
};