"use client";
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import carsData from '../data/cars.json';

export default function Vehicle() {
  const router = useRouter();
  const { index } = router.query;
  const cars = carsData.cars;
  const carIndex = parseInt(index);

  useEffect(() => {
    if (!isNaN(carIndex) && carIndex >= 0 && carIndex < cars.length) {
      const car = cars[carIndex];
      console.log(car);
    }
  }, [carIndex, cars]);

  if (isNaN(carIndex) || carIndex < 0 || carIndex >= cars.length) {
    return <div>Error: Car not found</div>;
  }

  const car = cars[carIndex];

  return (
    <div>
      <h1>{car.Make} {car.Model}</h1>
      <p>Year: {car.Year}</p>
      <p>Mileage: {car.Mileage}</p>
      <p>Transmission: {car.Transmission}</p>
      <p>Fuel: {car.Fuel}</p>
      <p>Price: ${car.Price}</p>
      <img src={car.Image1} alt={`${car.Make} ${car.Model}`} />
    </div>
  );
}