"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"

export default function SelectModels({ models }) {
  const router = useRouter()
  const [model1, setModel1] = useState("")
  const [model2, setModel2] = useState("")

  useEffect(() => {
    if (model1 && model2) {
      router.push(`/compare/${model1}-vs-${model2}`)
    }
  }, [model1, model2])

  return (
    <div>
      <select onChange={(e) => setModel1(e.target.value)}>
        <option value="">Select model 1</option>
        {models

          .sort((a, b) => b.total_score - a.total_score)
          .map((model, i) => (
            <option key={i} value={model.slug}>
              {model.name}
            </option>
          ))}
      </select>
      <select onChange={(e) => setModel2(e.target.value)}>
        <option value="">Select model 2</option>
        {models

          .sort((a, b) => b.total_score - a.total_score)
          .map((model, i) => (
            <option key={i} value={model.slug}>
              {model.name}
            </option>
          ))}
      </select>
    </div>
  )
}