import React, { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell, ReferenceLine } from 'recharts';
import { DollarSign, AlertTriangle, Home, Utensils, Info } from 'lucide-react';
const PriceDashboard = () => {
const [activeTab, setActiveTab] = useState('food');
// Datos procesados basados en tu input
const lodgingData = [
{
name: 'Habitación Sencilla',
promedioJaguar: 3578,
maximoDetectado: 10569,
nacional: 900, // Promedio de 600-1200
maxLabel: 'Mi Amor',
tag: 'Muy por encima'
},
{
name: 'Habitación Doble',
promedioJaguar: 4772,
maximoDetectado: 13860,
nacional: 1050, // Promedio de 700-1400
maxLabel: 'Diamante K',
tag: 'Excesivo'
}
];
const foodData = [
{
name: 'Guacamole',
promedioJaguar: 227,
maximoDetectado: 280,
nacional: 125, // Promedio de 100-150
tag: '2x Nacional'
},
{
name: 'Hamburguesa',
promedioJaguar: 348,
maximoDetectado: 400,
nacional: 200, // Promedio de 150-250
tag: 'Inflado'
},
{
name: 'Tacos (3)',
promedioJaguar: 306,
maximoDetectado: 400,
nacional: 175, // Promedio de 150-200
tag: 'Abusivo'
},
{
name: 'Quesadillas (3)',
promedioJaguar: 201,
maximoDetectado: 290,
nacional: 125, // Promedio de 100-150
tag: 'Desproporcionado'
}
];
const formatCurrency = (value) => {
return new Intl.NumberFormat('es-MX', {
style: 'currency',
currency: 'MXN',
minimumFractionDigits: 0
}).format(value);
};
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
const item = payload[0].payload;
return (
{label}
{item.maxLabel && (
Lugar max: {item.maxLabel}
)}
Veredicto: {item.tag}
Sobreprecio: +{Math.round(((item.promedioJaguar - item.nacional) / item.nacional) * 100)}% vs Nacional
);
}
return null;
};
const currentData = activeTab === 'food' ? foodData : lodgingData;
return (
{/* Header */}
La Realidad de los Precios
Comparativa: Parque Jaguar vs. Centro Tulum / Promedio Nacional
{/* Navigation Tabs */}
setActiveTab('food')}
className={`flex items-center px-6 py-3 rounded-full transition-all duration-300 ${
activeTab === 'food'
? 'bg-amber-500 text-slate-900 font-bold shadow-lg shadow-amber-500/20'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
setActiveTab('lodging')}
className={`flex items-center px-6 py-3 rounded-full transition-all duration-300 ${
activeTab === 'lodging'
? 'bg-cyan-500 text-slate-900 font-bold shadow-lg shadow-cyan-500/20'
: 'bg-slate-800 text-slate-400 hover:bg-slate-700'
}`}
>
{/* Main Chart Card */}
{activeTab === 'food' ? 'Índice de Precios: Alimentos' : 'Índice de Precios: Hospedaje'}
MXN (Pesos Mexicanos)
`$${value}`}
axisLine={{stroke: '#475569'}}
/>
{/* Insights Cards */}
{currentData.map((item, index) => {
const percentIncrease = Math.round(((item.promedioJaguar - item.nacional) / item.nacional) * 100);
return (
{item.name}
{percentIncrease > 100 ?
:
}
+{percentIncrease}%
Sobre el promedio nacional
{item.tag}
)
})}
);
};
export default PriceDashboard;
