'use client'

import useAuth from "@/hooks/useAuth";
import { apiCall } from "@/utils/callApi";
import { useEffect, useState } from "react";

export default function StoresPage() {
  const { clienttoken } = useAuth()
  const [stores, setStores] = useState<any[]>([])

  const fetchStores = async () => {
    try {
      const res = await apiCall<any>('/clientapi/appointment',  {
        headers: {
          Authorization: `Bearer ${clienttoken}`
        }
      })

      if(res.data?.success){
        setStores(res.data?.data)
      }
    } catch(error) {
      console.error('Error fetching stores', error)
    }
  }

  useEffect(() => {
    fetchStores()
  }, [])

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {stores.map((store) => (
        <div
          key={store._id}
          className="bg-white border border-gray-100 rounded-2xl p-4 hover:shadow-lg transition"
        >
          {/* Store Image (optional) */}
          <div className="h-40 bg-gray-100 rounded-xl mb-3 overflow-hidden">
            <img
              src={store.image || "/store-placeholder.jpg"}
              className="w-full h-full object-cover"
            />
          </div>

          {/* Store Info */}
          <h3 className="text-lg font-semibold text-gray-900">
            {store.storeName}
          </h3>

          <p className="text-sm text-gray-500 mt-1 line-clamp-2">
            {store.address}
          </p>

          {/* CTA */}
          <button
            className="mt-4 w-full bg-rose-600 text-white py-2 rounded-xl hover:bg-rose-700 transition"
            onClick={() => {}}
          >
            Book Appointment
          </button>
        </div>
      ))}
    </div>
  );
}