Event Item Header 4

"use client";

import React, { useState, useEffect } from "react";
import { clsx } from "clsx";
import { DateTime, Duration } from "luxon";
import { twMerge } from "tailwind-merge";
import { Badge } from "@/components/ui/badge";
import { Button, type ButtonProps } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { ChevronLeft } from "relume-icons";

type Date = {
  weekday: string;
  day: string;
  month: string;
  year: string | null;
};

type CountdownValues = {
  days: string;
  hours: string;
  minutes: string;
  seconds: string;
};

type Props = {
  backLink: {
    url: string;
    button: ButtonProps;
  };
  heading: string;
  description: string;
  inputPlaceholder: string;
  button: ButtonProps;
  termsAndConditions: string;
  date: Date;
  countdownValues: CountdownValues;
  amountLeft: string;
};

export type EventItemHeader4Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const EventItemHeader4 = (props: EventItemHeader4Props) => {
  const {
    backLink,
    heading,
    description,
    inputPlaceholder,
    button,
    termsAndConditions,
    date,
    countdownValues,
    amountLeft,
  } = {
    ...EventItemHeader4Defaults,
    ...props,
  };
  const [emailInput, setEmailInput] = useState<string>("");
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log({
      emailInput,
    });
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="grid auto-cols-fr grid-rows-[auto] items-center gap-x-20 gap-y-12 md:min-h-0 md:grid-flow-row md:grid-cols-1 md:gap-y-16 lg:grid-cols-2">
          <div className="flex flex-col items-start">
            <Button {...backLink.button} asChild>
              <a href={backLink.url}>{backLink.button.title}</a>
            </Button>
            <h1 className="mt-6 text-h2 font-bold md:mt-8">{heading}</h1>
            <p className="mt-5 text-medium md:mt-6">{description}</p>
            <div className="mt-6 w-full max-w-sm md:mt-8">
              <form
                className="mb-4 grid max-w-sm grid-cols-1 gap-y-3 sm:grid-cols-[1fr_max-content] sm:gap-4"
                onSubmit={handleSubmit}
              >
                <Input
                  id="email"
                  type="email"
                  placeholder={inputPlaceholder}
                  value={emailInput}
                  onChange={(e) => setEmailInput(e.target.value)}
                />
                <Button {...button}>{button.title}</Button>
              </form>
              <div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
            </div>
          </div>
          <div className="flex flex-col items-start lg:items-center">
            <h4 className="text-h4 font-bold">
              {date.weekday} {date.day} {date.month}
            </h4>
            <Card className="mt-5 flex flex-wrap justify-center gap-4 px-4 py-4 sm:flex-nowrap sm:px-6 md:mt-6">
              <div className="flex min-w-18 flex-col items-center">
                <h3 className="text-h3 font-bold">{countdownValues.days}</h3>
                <span>Days</span>
              </div>
              <div className="hidden w-px bg-scheme-border sm:block" />
              <div className="flex min-w-18 flex-col items-center">
                <h3 className="text-h3 font-bold">{countdownValues.hours}</h3>
                <span>Hours</span>
              </div>
              <div className="hidden w-px bg-scheme-border sm:block" />
              <div className="flex min-w-18 flex-col items-center">
                <h3 className="text-h3 font-bold">{countdownValues.minutes}</h3>
                <span>Mins</span>
              </div>
              <div className="hidden w-px bg-scheme-border sm:block" />
              <div className="flex min-w-18 flex-col items-center">
                <h3 className="text-h3 font-bold">{countdownValues.seconds}</h3>
                <span>Secs</span>
              </div>
            </Card>
            <Badge className="mt-4">{amountLeft} Spots left!</Badge>
          </div>
        </div>
      </div>
    </section>
  );
};

export const EventItemHeader4Defaults: Props = {
  backLink: {
    url: "#",
    button: {
      title: "All events",
      variant: "link",
      size: "link",
      iconLeft: <ChevronLeft className="text-scheme-text" />,
    },
  },
  heading: "Event title heading",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
  inputPlaceholder: "Enter your email",
  button: { title: "Save my spot" },
  termsAndConditions: `
  <p class='text-tiny'>
    By clicking Save my spot you're confirming that you agree with our
    <a href='#' class='underline'>Terms and Conditions</a>.
  </p>
  `,
  date: {
    weekday: "Sat",
    day: "10",
    month: "Feb",
    year: null,
  },
  countdownValues: {
    days: "45",
    hours: "12",
    minutes: "44",
    seconds: "29",
  },
  amountLeft: "10",
};