import { router } from "@inertiajs/react";
import React, { useState } from "react";
import styles from "./results.module.scss";

interface ResultsPerPageProps {
  options?: number[]; // options to select
  current?: number;   // current selected value
  onChange?: (perPage: number) => void; // optional callback for parent to handle loading state
}

const ResultsPerPage: React.FC<ResultsPerPageProps> = ({
  options = [5, 10, 25, 50, 100, 200, 500],
  current = 10,
  onChange,
}) => {
  const [selected, setSelected] = useState(current);

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const value = Number(e.target.value);
    setSelected(value);

    if (onChange) onChange(value);

    // Send per-page param to backend
    router.get(window.location.pathname, { perPage: value }, { preserveState: true, preserveScroll: true });
  };

  return (
    <div className={styles.resultsPerPage}>
      <label htmlFor="perPage">Show</label>
      <select id="perPage" value={selected} onChange={handleChange}>
        {options.map((opt) => (
          <option key={opt} value={opt}>
            {opt}
          </option>
        ))}
      </select>
      <span>results per page</span>
    </div>
  );
};

export default ResultsPerPage;