no-whatever/src/components/ProfileFavoritesCard.tsx

"use client";

import { motion, AnimatePresence } from "framer-motion";
import { Star, MapPin, ChevronDown, Trash2, Heart } from "lucide-react";
import Card from "@/components/Card";
import EmptyState from "@/components/EmptyState";
import RestaurantImage from "@/components/RestaurantImage";
import { RecordItemSkeleton } from "@/components/Skeleton";
import type { FavoriteRecord, Restaurant } from "@/types";

function firstImage(r: Restaurant): string {
  if (r.images?.length > 0) return r.images[0];
  const legacy = (r as unknown as Record<string, unknown>).image;
  return typeof legacy === "string" ? legacy : "";
}

interface ProfileFavoritesCardProps {
  favorites: FavoriteRecord[];
  loading: boolean;
  open: boolean;
  onToggle: () => void;
  onRemove: (id: string) => Promise<void>;
  onEmpty: () => void;
  delay?: number;
}

export default function ProfileFavoritesCard({
  favorites,
  loading,
  open,
  onToggle,
  onRemove,
  onEmpty,
  delay,
}: ProfileFavoritesCardProps) {
  return (
    <Card animated className="mt-4" delay={delay}>
      <button
        onClick={onToggle}
        className="flex w-full items-center justify-between"
      >
        <div className="flex items-center gap-2">
          <Star size={15} className="text-muted" />
          <h3 className="text-sm font-semibold text-secondary">
            收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
          </h3>
        </div>
        <motion.span
          animate={{ rotate: open ? 180 : 0 }}
          transition={{ duration: 0.2 }}
          className="text-muted"
        >
          <ChevronDown size={16} />
        </motion.span>
      </button>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="overflow-hidden"
          >
            {loading ? (
              <div className="mt-3 flex flex-col gap-2">
                <RecordItemSkeleton />
                <RecordItemSkeleton />
              </div>
            ) : favorites.length === 0 ? (
              <EmptyState
                icon={Heart}
                title="还没有收藏的餐厅"
                subtitle="在匹配结果中收藏喜欢的店"
                ctaLabel="去创建第一个房间"
                onCta={onEmpty}
                color="amber"
              />
            ) : (
              <div className="mt-3 flex flex-col gap-2">
                {favorites.map((f) => {
                  const r = f.restaurantData;
                  return (
                    <div
                      key={f.id}
                      className="flex gap-3 rounded-xl bg-elevated p-2.5"
                    >
                      {firstImage(r) && (
                        <RestaurantImage
                          src={firstImage(r)}
                          alt={r.name}
                          className="h-12 w-12 shrink-0 rounded-lg object-cover"
                        />
                      )}
                      <div className="flex min-w-0 flex-1 flex-col justify-center">
                        <p className="truncate text-sm font-semibold text-heading">{r.name}</p>
                        <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                          <span className="flex items-center gap-0.5">
                            <Star size={10} className="fill-amber-400 text-amber-400" />
                            {r.rating}
                          </span>
                          <span>{r.price}</span>
                          {r.distance && (
                            <span className="flex items-center gap-0.5">
                              <MapPin size={10} />
                              {r.distance}
                            </span>
                          )}
                        </div>
                      </div>
                      <button
                        onClick={() => onRemove(f.id)}
                        className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-muted transition-colors active:bg-subtle active:text-rose-400"
                      >
                        <Trash2 size={14} />
                      </button>
                    </div>
                  );
                })}
              </div>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </Card>
  );
}