import React from "react";
import { motion } from "framer-motion";

interface ShipSelectorProps {
  remainingShips: string[]; // ex: ["carrier", "battleship", ...]
  selectedShip: string | null;
  orientation: "h" | "v";
  onSelectShip: (ship: string) => void;
  onToggleOrientation: () => void;
}

export default function ShipSelector({
  remainingShips,
  selectedShip,
  orientation,
  onSelectShip,
  onToggleOrientation,
}: ShipSelectorProps) {
  return (
    <div style={{ marginTop: 12, textAlign: "center" }}>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 0.9 }}
        style={{
          marginBottom: 10,
          fontSize: 16,
          color: "#ddd",
        }}
      >
        Select ship & orientation
      </motion.div>

      {/* SHIP BUTTONS */}
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          gap: "10px",
          flexWrap: "wrap",
          marginBottom: 14,
        }}
      >
        {remainingShips.map((ship) => {
          const active = ship === selectedShip;

          return (
            <motion.button
              key={ship}
              onClick={() => onSelectShip(ship)}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.92 }}
              style={{
                padding: "8px 14px",
                borderRadius: 8,
                background: active ? "#f1c40f" : "#333",
                color: active ? "#000" : "#fff",
                border: "2px solid #444",
                cursor: "pointer",
                fontSize: 14,
              }}
            >
              {ship.toUpperCase()}
            </motion.button>
          );
        })}
      </div>

      {/* ORIENTATION BUTTON */}
      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.92 }}
        onClick={onToggleOrientation}
        style={{
          padding: "8px 14px",
          borderRadius: 8,
          background: "#222",
          color: "white",
          border: "2px solid #444",
          cursor: "pointer",
          fontSize: 14,
        }}
      >
        Orientation: <strong>{orientation === "h" ? "Horizontal" : "Vertical"}</strong>
      </motion.button>
    </div>
  );
}