"use client";

import { motion } from "framer-motion";
import BoldIcon from "@/components/ui/BoldIcon";

interface ChatDeleteBarProps {
  selectedCount: number;
  onDelete: () => void;
  onCancel: () => void;
  loading?: boolean;
}

export default function ChatDeleteBar({
  selectedCount,
  onDelete,
  onCancel,
  loading = false,
}: ChatDeleteBarProps) {
  return (
    <motion.div
      initial={{ y: 24, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      exit={{ y: 24, opacity: 0 }}
      transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
      className="pointer-events-none fixed bottom-0 left-0 right-0 z-[60] flex justify-center px-3 chat-input-area--thread"
    >
      <div className="pointer-events-auto mb-2 flex w-full max-w-lg gap-2">
        <button
          type="button"
          onClick={onCancel}
          disabled={loading}
          className="glass-panel gentle-transition flex-1 rounded-full py-3 text-sm font-medium active:scale-[0.98] disabled:opacity-50"
        >
          انصراف
        </button>
        <button
          type="button"
          onClick={onDelete}
          disabled={loading || selectedCount === 0}
          className="gentle-transition flex flex-[2] items-center justify-center gap-2 rounded-full bg-red-500 py-3 text-sm font-semibold text-white active:scale-[0.98] disabled:opacity-50"
        >
          <BoldIcon name="trash" size={18} tinted className="text-white" />
          {selectedCount > 0 ? `حذف (${selectedCount})` : "حذف"}
        </button>
      </div>
    </motion.div>
  );
}
