Event Item Header 3

"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";

type ImageProps = {
  src: string;
  alt?: string;
};

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

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

type Props = {
  tagline: string;
  heading: string;
  description: string;
  date: Date;
  image: ImageProps;
  button: ButtonProps;
  inputPlaceholder: string;
  termsAndConditions: string;
  countdownValues: CountdownValues;
  amountLeft: string;
};

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

export const EventItemHeader3 = (props: EventItemHeader3Props) => {
  const {
    tagline,
    heading,
    description,
    date,
    image,
    inputPlaceholder,
    button,
    termsAndConditions,
    countdownValues,
    amountLeft,
  } = {
    ...EventItemHeader3Defaults,
    ...props,
  };
  const [emailInput, setEmailInput] = useState<string>("");
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log({
      emailInput,
    });
  };
  return (
    <section className="relative px-[5%] py-16 md:py-24 lg:py-28">
      <div className="relative z-10 mx-auto flex w-full max-w-lg flex-col items-center text-center text-white">
        <h4 className="font-semibold">{tagline}</h4>
        <h1 className="mt-3 text-h2 font-bold md:mt-4">{heading}</h1>
        <p className="mt-5 text-medium md:mt-6">{description}</p>
        <div className="mt-5 text-medium font-semibold md:mt-6">
          {date.weekday} {date.day} {date.month}
        </div>
        <Badge className="mt-4" variant="alternate">
          {amountLeft} Spots left!
        </Badge>
        <Card
          variant="transparent"
          className="mt-8 flex flex-wrap justify-center gap-4 px-4 py-4 sm:flex-nowrap sm:px-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-white 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-white 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-white 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>
        <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)}
              variant="secondary"
            />
            <Button {...button}>{button.title}</Button>
          </form>
          <div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
        </div>
      </div>
      <div className="absolute inset-0 z-0">
        <img src={image.src} className="size-full object-cover" alt={image.alt} />
        <div className="absolute inset-0 bg-neutral-darkest/50" />
      </div>
    </section>
  );
};

export const EventItemHeader3Defaults: Props = {
  tagline: "Tagline",
  heading: "Event title heading",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
  date: {
    weekday: "Sat",
    day: "10",
    month: "Feb",
    year: null,
  },
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder background image",
  },
  inputPlaceholder: "Enter your email",
  button: { title: "Save my spot", variant: "alternate" },
  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>
  `,
  amountLeft: "10",
  countdownValues: {
    days: "45",
    hours: "12",
    minutes: "44",
    seconds: "29",
  },
};