import { SingleRankingsParams } from "../../api/rankings";

const positions = ["Goalkeeper", "Defender", "Midfielder", "Forward"];

interface PositionSelectProps {
  params: SingleRankingsParams;
  setParams: (params: SingleRankingsParams) => void;
}

export default function PositionSelect({
  params,
  setParams,
}: PositionSelectProps) {
  const handlePositionChange = (position: string) => {
    setParams({
      ...params,
      position,
    });
  };

  return (
    <div className="flex border-2 border-gray-300 rounded-xl overflow-hidden">
      {positions.map((position, index) => (
        <div
          key={position}
          className={`flex-auto ${index > 0 ? "border-l-2 border-gray-300" : ""}`}
        >
          <button
            className={`w-full py-1 px-3 ${
              params.position === position
                ? "bg-primary-blue-500 hover:bg-primary-blue-700 text-white"
                : "bg-white hover:bg-neutral-100 text-neutral-800"
            }`}
            onClick={() => handlePositionChange(position)}
          >
            {position}
          </button>
        </div>
      ))}
    </div>
  );
}