"use client";

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

interface ResultsPerPageProps {
  options?: number[];
  current?: number;
  onChange?: (perPage: number) => void;
}

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

  // Sync with backend changes
  useEffect(() => {
    setSelected(current);
  }, [current]);

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

    if (onChange) onChange(value);

    router.get(
      window.location.pathname,
      { perPage: value },
      {
        preserveState: true,
        preserveScroll: true,
        replace: true,
      }
    );
  };

  return (
    <div className={styles.resultsPerPage}>
      <span className={styles.label}>Show</span>

      <div className={styles.selectWrapper}>
        <select value={selected} onChange={handleChange}>
          {options.map((opt) => (
            <option key={opt} value={opt}>
              {opt}
            </option>
          ))}
        </select>
      </div>

      <span className={styles.labelMuted}>results per page</span>
    </div>
  );
};

export default ResultsPerPage;