"use client";

import { Star, MapPin } from "lucide-react";
import type { Restaurant } from "@/types";
import RestaurantImage from "@/components/RestaurantImage";
import { buildNavUrl } from "@/lib/navigation";

interface RunnerUpCardProps {
  restaurant: Restaurant;
  likes: number;
  userCount: number;
}

export default function RunnerUpCard({ restaurant, likes, userCount }: RunnerUpCardProps) {
  return (
    <a
      href={buildNavUrl(restaurant)}
      target="_blank"
      rel="noopener noreferrer"
      className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
    >
      {restaurant.images?.[0] && (
        <RestaurantImage
          src={restaurant.images[0]}
          alt={restaurant.name}
          className="h-16 w-16 shrink-0 rounded-lg object-cover"
        />
      )}
      <div className="flex min-w-0 flex-1 flex-col justify-center">
        <p className="truncate text-sm font-bold text-heading">
          {restaurant.name}
        </p>
        <div className="mt-1 flex items-center gap-2 text-xs text-tertiary">
          <span className="flex items-center gap-0.5">
            <Star size={11} className="fill-yellow-300 text-yellow-300" />
            {restaurant.rating}
          </span>
          <span>{restaurant.price}</span>
          {restaurant.distance && (
            <span className="flex items-center gap-0.5">
              <MapPin size={11} />
              {restaurant.distance}
            </span>
          )}
        </div>
        <p className="mt-0.5 text-[11px] font-medium text-amber-400">
          {likes}/{userCount} 人想去
        </p>
      </div>
    </a>
  );
}