import { ScatterChart, Scatter, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
import WeatherHistory from '@/hooks/weather-history'

function TemperaturePlotChart({data} : {data: WeatherHistory[] | undefined}){
    if (!data || data.length === 0) {
        return <div className="w-full h-96">No data available</div>
    }

    return (

        <div className="w-full">
            <ResponsiveContainer width="100%" height={400}>
              <ScatterChart data={data}>
                <XAxis dataKey="id" />
                <YAxis />
                <Tooltip />
                <Scatter dataKey="temp" fill="#6366f1" />
              </ScatterChart>
            </ResponsiveContainer>
        </div>
    )
}

export default TemperaturePlotChart