"use client";

import { useState } from "react";
import { Card } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";

const mockHospitals = [
  { id: "h1", name: "宠颐生动物医院", address: "朝阳区建国路88号", phone: "010-88886666", rating: 4.8, distance: 1.2, services: ["疫苗", "体检", "手术", "美容"] },
  { id: "h2", name: "瑞鹏宠物医院", address: "海淀区中关村大街1号", phone: "010-66668888", rating: 4.6, distance: 2.8, services: ["急诊", "住院", "化验"] },
  { id: "h3", name: "佳雯宠物诊所", address: "西城区金融街16号", phone: "010-55556666", rating: 4.5, distance: 3.5, services: ["疫苗", "驱虫", "体检"] },
];

export default function HospitalPage() {
  const [search, setSearch] = useState("");

  const filtered = mockHospitals.filter(h =>
    h.name.includes(search) || h.address.includes(search)
  );

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-bold text-gray-800">附近医院</h1>
        <p className="text-sm text-gray-500 mt-1">查找附近的宠物医院</p>
      </div>

      <Input placeholder="搜索医院名称或地址..." value={search} onChange={e => setSearch(e.target.value)} />

      <div className="space-y-3">
        {filtered.map(h => (
          <Card key={h.id}>
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-500 flex-shrink-0">🏥</div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <h3 className="font-medium text-gray-800 truncate">{h.name}</h3>
                  <span className="text-xs px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded flex-shrink-0">⭐ {h.rating}</span>
                </div>
                <p className="text-xs text-gray-500 mt-1">{h.address}</p>
                <p className="text-xs text-gray-400 mt-0.5">{h.distance}km · {h.phone}</p>
                <div className="flex gap-1 mt-2">
                  {h.services.map(s => <span key={s} className="text-xs px-2 py-0.5 bg-gray-100 text-gray-600 rounded">{s}</span>)}
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}