"use client";

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

interface Props {
  selectedStore: SelectedStore;
  selectedSlot: SelectedSlot;
  userDetails: UserDetails;
  appointmentId: string | null;
}

export default function StepConfirmation({
  selectedStore,
  selectedSlot,
  userDetails,
  appointmentId,
}: Props) {
  return (
    <div className="bg-white border border-[#e2d5c0] rounded-xl p-10 text-center">
      <div className="text-6xl mb-6">✓</div>

      <h2 className="text-4xl text-[#2C1810] mb-4">
        Appointment Confirmed
      </h2>

      <p className="text-[#6B5040] mb-8">
        Thank you {userDetails?.name}
      </p>

      <div className="max-w-md mx-auto text-left space-y-3 bg-[#FAF7F2] p-6 rounded-xl">
        <p>
          <strong>Appointment ID:</strong> {appointmentId}
        </p>

        <p>
          <strong>Store:</strong> {selectedStore.name}
        </p>

        <p>
          <strong>Time:</strong> {selectedSlot.timeSlot}
        </p>

        <p>
          <strong>Email:</strong> {userDetails.email}
        </p>
      </div>
    </div>
  );
}