"use client";

import { useState } from "react";
import { SelectedSlot, SelectedStore, UserDetails } from "./AppointmentPage";

interface Props {
    selectedStore: SelectedStore;
    selectedSlot: SelectedSlot;
    onSubmit: (details: UserDetails) => void;
    onEditStore: () =>  void;
    onEditSlot: () => void
}

export default function StepEnterDetails({
    selectedStore,
    selectedSlot,    
    onSubmit,
    onEditStore,
    onEditSlot
}: Props) {
  const [form, setForm] = useState<UserDetails>({
    name: "",
    phone: "",
    email: "",
    celebrating: "groom",
    lookingFor: "",
  });

  return (
    <div className="bg-white border rounded-xl p-6 space-y-5">

      <h2 className="text-xl font-medium">
        Enter Details
      </h2>

      {/* FIRST NAME */}
      <input
        placeholder="Name*"
        className="w-full border p-3 rounded"
        onChange={(e) =>
          setForm({ ...form, name: e.target.value })
        }
      />

      {/* PHONE */}
      <input
        placeholder="Mobile number*"
        className="w-full border p-3 rounded"
        onChange={(e) =>
          setForm({ ...form, phone: e.target.value })
        }
      />

      {/* EMAIL */}
      <input
        placeholder="Email ID*"
        className="w-full border p-3 rounded"
        onChange={(e) =>
          setForm({ ...form, email: e.target.value })
        }
      />

      {/* CELEBRATION */}
      <div className="space-y-2">
        <p className="font-medium">
          What are you celebrating?
        </p>

        {[
          "groom",
          "bride",
          "event",
          "other",
        ].map((item) => (
          <label
            key={item}
            className="flex items-center gap-2"
          >
            <input
              type="radio"
              name="celebrating"
              onChange={() =>
                setForm({
                  ...form,
                  celebrating: item as any,
                })
              }
            />
            {item === "groom" && "I am a Groom"}
            {item === "bride" && "I am a Bride"}
            {item === "event" && "Attending an Event"}
            {item === "other" && "Other"}
          </label>
        ))}
      </div>

      {/* LOOKING FOR */}
      <textarea
        placeholder="What are you looking for?"
        className="w-full border p-3 rounded"
        rows={4}
        onChange={(e) =>
          setForm({
            ...form,
            lookingFor: e.target.value,
          })
        }
      />

      {/* SUBMIT */}
      <button
        onClick={() => onSubmit(form)}
        className="w-full bg-orange-500 text-white py-3 rounded"
      >
        Confirm Appointment
      </button>
    </div>
  );
}