"use client";

import { SelectedStore } from "./AppointmentPage";


interface Props {
  stores: any[];
  onSelect: (store: SelectedStore) => void;
}

// const stores: SelectedStore[] = [
//   {
//     _id: "1",
//     name: "Dulhe Saheb - South City Mall",
//     address: "Shop No-S301, 3rd Floor, South City Mall",
//     city: "Kolkata",
//     state: "West Bengal",
//     phone: "9830536080",
//   },
//   {
//     _id: "2",
//     name: "Dulhe Saheb - Park Street",
//     address: "Park Street Main Road",
//     city: "Kolkata",
//     state: "West Bengal",
//     phone: "9830536099",
//   },
// ];

export default function StepSelectStore({ stores, onSelect }: Props) {
  return (
    <div className="flex gap-10">

      {/* LEFT SIDE (empty step space like reference) */}
      {/* <div className="w-[280px]">
        <div className="text-sm text-gray-500">
          Pick a location
        </div>
      </div> */}

      {/* RIGHT SIDE LIST */}
      <div className="flex-1 space-y-6">

        <h2 className="text-gray-500 font-semibold text-sm md:text-base 2xl:text-lg">
          Showing nearby stores
        </h2>

        {stores.map((store) => (
          <div
            key={store._id}
            className="flex justify-between items-start border-b pb-6"
          >

            {/* STORE INFO */}
            <div className="space-y-1 pr-10">

              <h3 className="text-[16px] font-medium text-black font-semibold text-base md:text-base 2xl:text-lg">
                {store.name}
              </h3>

              <p className="text-sm text-gray-600 leading-5 text-sm md:text-sm 2xl:text-base">
                {store.address}, {store.city}, {store.state}
              </p>

              <p className="text-sm text-gray-500 text-sm md:text-sm 2xl:text-base">
                Contact: {store.phone}
              </p>

              <p className="text-sm text-green-700 font-medium text-sm md:text-sm 2xl:text-base">
                Open Now 10:00 AM – 10:00 PM
              </p>

            </div>

            {/* BUTTON */}
            <button
              onClick={() => onSelect(store)}
              className="
                theme-btn
              "
            >
              SELECT
            </button>

          </div>
        ))}
      </div>
    </div>
  );
}