"use client";

import { motion, AnimatePresence } from "framer-motion";
import IOSSpinner from "@/components/ui/IOSSpinner";

interface ReadReceiptProps {
  status?: "pending" | "sent" | "seen";
}

export default function ReadReceipt({ status }: ReadReceiptProps) {
  if (!status) return null;

  return (
    <div className="flex h-3.5 min-w-[16px] items-center justify-end">
      <AnimatePresence mode="wait">
        {status === "pending" ? (
          <motion.span
            key="pending"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <IOSSpinner size={12} color="#8e8e93" />
          </motion.span>
        ) : status === "sent" ? (
          <motion.svg
            key="sent"
            className="read-check-animate"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
          >
            <path
              d="M5 12.5L9.5 17L19 7"
              stroke="#8e8e93"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </motion.svg>
        ) : (
          <motion.svg
            key="seen"
            className="read-check-animate"
            width="16"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            initial={{ opacity: 0, x: -4 }}
            animate={{ opacity: 1, x: 0 }}
          >
            <path
              d="M4 12.5L7.5 16L16 7"
              stroke="#007aff"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M9 12.5L12.5 16L21 7"
              stroke="#007aff"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </motion.svg>
        )}
      </AnimatePresence>
    </div>
  );
}
