import { AnimatePresence, motion } from "framer-motion";
import ParcelCard from "./ParcelCard";
import { Package } from "lucide-react";

function ParcelList({ parcels }) {
  if (parcels.length === 0) {
    return (
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-center py-16 text-gray-400"
      >
        <Package size={48} className="mx-auto mb-3 opacity-50" />
        <p className="text-sm lg:text-base">등록된 택배가 없습니다</p>
      </motion.div>
    );
  }

  return (
    <div className="space-y-3">
      <AnimatePresence mode="popLayout">
        {parcels.map((parcel, index) => (
          <motion.div
            key={parcel.id}
            layout
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, x: -30 }}
            transition={{ duration: 0.25, delay: index * 0.05 }}
          >
            <ParcelCard parcel={parcel} />
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}

export default ParcelList;