"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 flex items-center justify-center gap-8 pb-8 pt-4">
      <motion.button
        className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40"
        whileTap={{ scale: 0.85 }}
        whileHover={{ scale: 1.08 }}
        onClick={() => onAction("left")}
        disabled={disabled}
        aria-label="Nope"
      >
        <X size={30} className="text-rose-500" strokeWidth={3} />
      </motion.button>

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