"use client";

import { motion } from "framer-motion";
import { X, Heart } from "lucide-react";
import { SwipeDirection } from "@/types";

interface ActionButtonsProps {
  onAction: (direction: SwipeDirection) => void;
  disabled: boolean;
}

export default function ActionButtons({
  onAction,
  disabled,
}: ActionButtonsProps) {
  return (
    <div className="relative z-10 -mt-2 flex items-center justify-center gap-4 pb-5">
      <motion.button
        className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-rose-500/10 ring-1 ring-rose-500/20 disabled:opacity-40"
        whileTap={{ scale: 0.85 }}
        whileHover={{ scale: 1.08 }}
        onClick={() => onAction("left")}
        disabled={disabled}
        aria-label="Nope"
      >
        <X size={26} className="text-rose-500" strokeWidth={3} />
      </motion.button>

      <motion.button
        className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-emerald-500/10 ring-1 ring-emerald-500/20 disabled:opacity-40"
        whileTap={{ scale: 0.85 }}
        whileHover={{ scale: 1.08 }}
        onClick={() => onAction("right")}
        disabled={disabled}
        aria-label="Like"
      >
        <Heart
          size={24}
          className="fill-emerald-500 text-emerald-500"
          strokeWidth={2.5}
        />
      </motion.button>
    </div>
  );
}
