import { CustomCard } from '@/components/ui/cards'
import React from 'react'
import TempetureSVG from './TempetureSVG'
import { H5 } from '@/components/ui/typography'

interface ITemperature {
    vehicle_status: {
        engine: {
            ignition_status: { value: boolean };
            rpm: { value: number };
            temperature: { value: number };
            oil_level: { value: number };
            working_status: { value: boolean };
        };
        fuel: {
            level: { value: number };
            volume: { value: number };
            remaining_range: { value: number };
            consumed_fuel: { value: number };
        };
        speed: {
            current_speed: { value: number };
            overspeeding_status: { value: boolean };
            overspeeding_speed: { value: number | null; date: string | null };
        };
        pedal: {
            throttle_pedal_level: { value: boolean };
            brake_pedal_status: { value: boolean };
            pedal_clutch_status: { value: boolean };
        };
    }
}
const Temperature = ({ vehicle_status }: ITemperature) => {
    return (
        <CustomCard className='flex items-center gap-4 w-fit rounded-sm'>
            <TempetureSVG
                color={
                    vehicle_status?.engine?.temperature?.value < 60
                        ? '#3B82F6'
                        : vehicle_status?.engine?.temperature?.value <= 105
                            ? '#FF9122'
                            : '#EF4444'
                }
            />
            <H5 >{vehicle_status?.engine?.temperature?.value && `${vehicle_status?.engine?.temperature?.value}c` || "-"}</H5>

        </CustomCard>
    )
}

export default Temperature