"use client";

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

interface ChatActionBarProps {
  onReply: () => void;
  onForward: () => void;
  onCancel: () => void;
}

export default function ChatActionBar({
  onReply,
  onForward,
  onCancel,
}: ChatActionBarProps) {
  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}
          className="glass-panel gentle-transition flex-1 rounded-full py-3 text-sm font-medium active:scale-[0.98]"
        >
          انصراف
        </button>
        <button
          type="button"
          onClick={onReply}
          className="chat-action-btn gentle-transition flex flex-1 items-center justify-center gap-2 rounded-full py-3 text-sm font-semibold text-white active:scale-[0.98]"
        >
          <ChatBoldIcon name="reply" size={18} className="text-white" />
          پاسخ
        </button>
        <button
          type="button"
          onClick={onForward}
          className="chat-forward-btn gentle-transition flex flex-1 items-center justify-center gap-2 rounded-full py-3 text-sm font-semibold text-white active:scale-[0.98]"
        >
          <BoldIcon name="share" size={18} tinted className="text-white" />
          فوروارد
        </button>
      </div>
    </motion.div>
  );
}
