import React from 'react'

interface IPedals {
    pedals: {
        throttle_pedal_level: { value: boolean }
        brake_pedal_status: { value: boolean }
        pedal_clutch_status: { value: boolean },
    }
}
const Pedals = ({pedals}:IPedals) => {
    return (
        <div>
            <svg width="148" height="73" viewBox="0 0 148 73" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clipPath="url(#clip0_8916_50822)">
                    <rect x="0.726562" y="0.375" width="147.273" height="72" rx="6.85714" fill="#EBEBEB" />
                    <g filter="url(#filter0_d_8916_50822)">
                        <rect x="24.7266" y="0.375" width="3.42857" height="34.2857" fill={pedals?.pedal_clutch_status?.value ? "#505050" : "#C0C0C0"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} />
                        <rect x="11.0117" y="34.6602" width="30.8571" height="27.4286" rx="10.2857" fill={pedals?.pedal_clutch_status?.value ? "#505050" : "#C0C0C0"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} />
                    </g>
                    <g filter="url(#filter1_d_8916_50822)">
                        <rect x="76.0742" y="0.375" width="3.42857" height="34.2857" fill={pedals?.brake_pedal_status?.value ? "#505050" : "#C0C0C0"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} />
                        <rect x="55.5039" y="34.6602" width="44.5714" height="27.4286" rx="10.2857" fill={pedals?.brake_pedal_status?.value ? "#505050" : "#C0C0C0"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} />
                    </g>
                    <g filter="url(#filter2_d_8916_50822)">
                        <rect x="124" y="0.375" width="3.42857" height="13.7143" fill={pedals?.throttle_pedal_level?.value ? "#505050" : "#C0C0C0"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} />
                        <rect x="113.715" y="14.0898" width="24" height="37.7143" rx="10.2857" fill={pedals?.throttle_pedal_level?.value ? "#505050" : "#C0C0C0"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} />
                    </g>
                </g>
                <rect x="1.3402" y="0.988636" width="146.045" height="70.7727" rx="6.24351" stroke="#D3D3D7" strokeWidth="1.22727" />
                <defs>
                    <filter id="filter0_d_8916_50822" x="1.19354" y="-4.53409" width="50.4918" height="81.3512" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                        <feOffset dy="4.90909" />
                        <feGaussianBlur stdDeviation="4.90909" />
                        <feComposite in2="hardAlpha" operator="out" />
                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8916_50822" />
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8916_50822" result="shape" />
                    </filter>
                    <filter id="filter1_d_8916_50822" x="45.6857" y="-4.53409" width="64.2067" height="81.3512" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                        <feOffset dy="4.90909" />
                        <feGaussianBlur stdDeviation="4.90909" />
                        <feComposite in2="hardAlpha" operator="out" />
                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8916_50822" />
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8916_50822" result="shape" />
                    </filter>
                    <filter id="filter2_d_8916_50822" x="103.897" y="-4.53409" width="43.6364" height="71.0661" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                        <feOffset dy="4.90909" />
                        <feGaussianBlur stdDeviation="4.90909" />
                        <feComposite in2="hardAlpha" operator="out" />
                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8916_50822" />
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8916_50822" result="shape" />
                    </filter>
                    <clipPath id="clip0_8916_50822">
                        <rect x="0.726562" y="0.375" width="147.273" height="72" rx="6.85714" fill="white" />
                    </clipPath>
                </defs>
            </svg>
        </div>
    )
}

export default Pedals