"use client";
import useSWR from "swr";
import { useState } from "react";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export default function PartnersPage() {
  const [lat, setLat] = useState<string>("");
  const [lon, setLon] = useState<string>("");
  const [category, setCategory] = useState<string>("");
  const [radius, setRadius] = useState<string>("10");
  const qs = new URLSearchParams({ ...(lat ? { lat } : {}), ...(lon ? { lon } : {}), ...(category ? { category } : {}), radius });
  const { data, mutate } = useSWR<{ partners: any[] }>(`/api/partners?${qs.toString()}`, fetcher);
  return (
    <div>
      <h1>주변 제휴업체</h1>
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        <input placeholder="위도" value={lat} onChange={(e) => setLat(e.target.value)} />
        <input placeholder="경도" value={lon} onChange={(e) => setLon(e.target.value)} />
        <input placeholder="카테고리(spa/gym 등)" value={category} onChange={(e) => setCategory(e.target.value)} />
        <input placeholder="반경(km)" value={radius} onChange={(e) => setRadius(e.target.value)} />
        <button onClick={() => mutate()}>검색</button>
      </div>
      <ul style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {(data?.partners ?? []).map((p) => (
          <li key={p.id} style={{ border: "1px solid #eee", borderRadius: 8, padding: 12 }}>
            <strong>{p.name}</strong> <span style={{ opacity: 0.7 }}>({p.category})</span>
            <div style={{ fontSize: 12, opacity: 0.8 }}>{p.address}</div>
            {p.distance != null && <div style={{ fontSize: 12, opacity: 0.7 }}>거리: {p.distance.toFixed(2)} km</div>}
          </li>
        ))}
      </ul>
    </div>
  );
}


