Cotizaciones

import React, { useState } from 'react';

interface Producto {
nombre: string;
precio: number;
rendimiento: number;
calidad: number;
url: string;
}

const productos: Producto[] = [
{ nombre: 'Producto 1', precio: 100, rendimiento: 8, calidad: 9, url: 'https://example.com/producto1' },
{ nombre: 'Producto 2', precio: 200, rendimiento: 9, calidad: 8, url: 'https://example.com/producto2' },
{ nombre: 'Producto 3', precio: 300, rendimiento: 7, calidad: 9, url: 'https://example.com/producto3' },
];

const Cotizador = () => {
const [precio, setPrecio] = useState(0);
const [rendimiento, setRendimiento] = useState(0);
const [calidad, setCalidad] = useState(0);
const [resultado, setResultado] = useState<string | null>(null);

const handlePrecio = (e: React.ChangeEvent<HTMLInputElement>) => {
setPrecio(parseInt(e.target.value));
};

const handleRendimiento = (e: React.ChangeEvent<HTMLInputElement>) => {
setRendimiento(parseInt(e.target.value));
};

const handleCalidad = (e: React.ChangeEvent<HTMLInputElement>) => {
setCalidad(parseInt(e.target.value));
};

const calcularResultado = () => {
if (precio > 0 && rendimiento > 0 && calidad > 0) {
const productoRecomendado = productos.reduce((prev, current) => {
const puntajePrev = (prev.precio * precio + prev.rendimiento * rendimiento + prev.calidad * calidad) / (precio + rendimiento + calidad);
const puntajeCurrent = (current.precio * precio + current.rendimiento * rendimiento + current.calidad * calidad) / (precio + rendimiento + calidad);
return puntajePrev > puntajeCurrent ? prev : current;
}, productos[0]);
setResultado(productoRecomendado.url);
}
};

return (
<div className="max-w-md mx-auto p-4 bg-white rounded-md shadow-md">
<h2 className="text-lg font-bold mb-4">Cotizador</h2>
<div className="flex flex-col mb-4">
<label className="text-sm font-bold mb-2">Precio</label>
<input
type="range"
min="1"
max="10"
value={precio}
onChange={handlePrecio}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
/>
<span className="text-sm font-bold">{precio}</span>
</div>
<div className="flex flex-col mb-4">
<label className="text-sm font-bold mb-2">Rendimiento</label>
<input
type="range"
min="1"
max="10"
value={rendimiento}
onChange={handleRendimiento}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
/>
<span className="text-sm font-bold">{rendimiento}</span>
</div>
<div className="flex flex-col mb-4">
<label className="text-sm font-bold mb-2">Calidad</label>
<input
type="range"
min="1"
max="10"
value={calidad}
onChange={handleCalidad}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
/>
<span className="text-sm font-bold">{calidad}</span>
</div>
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={calcularResultado}
>
Calcular
</button>
{resultado && (
<div className="mt-4">
<a href={resultado} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-blue-700 font-bold">
Ver producto recomendado
</a>
</div>
)}
</div>
);
};

export default Cotizador;