"use client";

import { SelectedStore } from "./AppointmentPage";


interface Props {
  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({ 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-sm text-gray-500">
          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">
                {store.name}
              </h3>

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

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

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

            </div>

            {/* BUTTON */}
            <button
              onClick={() => onSelect(store)}
              className="
                border border-orange-500
                text-orange-500
                px-6 py-2
                text-sm font-medium
                hover:bg-orange-500 hover:text-white
                transition
              "
            >
              SELECT
            </button>

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