import type { MapData } from './types';

export function MapPlacesCard({ data, onExpand }: { data: MapData; onExpand: () => void }) {
  const { query, places } = data;

  return (
    <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 my-2 not-prose" style={{ maxWidth: 600 }}>
      {/* Header */}
      <div className="flex items-center gap-2 mb-3">
        <span className="text-sm">&#128205;</span>
        <span className="font-semibold text-slate-700" style={{ fontSize: 13 }}>地図検索結果: 「{query}」</span>
        <span className="text-slate-400 ml-auto" style={{ fontSize: 11 }}>{places.length}件</span>
      </div>

      {/* Place list */}
      <div className="space-y-1.5">
        {places.slice(0, 5).map((p, i) => (
          <div
            key={`${p.lat}-${p.lon}`}
            className="flex items-start gap-2 bg-canvas border border-slate-200 rounded-lg px-3 py-2"
          >
            <span className="text-slate-400 font-mono flex-shrink-0" style={{ fontSize: 11 }}>{i + 1}</span>
            <div className="min-w-0">
              <div className="font-semibold text-slate-800 truncate" style={{ fontSize: 12 }}>{p.name}</div>
              <div className="text-slate-400 truncate" style={{ fontSize: 11 }}>{p.address}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Expand button */}
      <div className="text-center mt-2">
        <button
          onClick={onExpand}
          className="text-blue-500 hover:text-blue-700 cursor-pointer bg-transparent border-none"
          style={{ fontSize: 11 }}
        >
          &#9660; 地図で表示
        </button>
      </div>
    </div>
  );
}