import React from 'react'

interface IDoors {
    seatbelts: {
          driver_seatbelt_status: { value: boolean};
          front_passenger_seatbelt_status: { value: boolean};
          central_passenger_seatbelt_status: { value: boolean};
          left_passenger_seatbelt_status: { value: boolean};
          right_passenger_seatbelt_status: { value: boolean};
          indicators: {
            driver: { value: boolean};
            passenger: { value: boolean};
          };
        };
        doors: {
        door_status: { value: boolean};
        front_left_door_status: { value: boolean};
        front_right_door_status: { value: boolean};
        rear_left_door_status: { value: boolean};
        rear_right_door_status: { value: boolean};
      };
}
const Doors = ({ seatbelts,doors }: IDoors) => {
    return (
        <div className='max-lg:hidden'>
            <svg width="252" height="220" viewBox="0 0 252 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="245.578" y="41.375" width="117.5" height="238.706" rx="7.36364" transform="rotate(90 245.578 41.375)" fill="#EBEBEB" stroke="#D3D3D7" strokeWidth="1.5" />
                <ellipse cx="246.341" cy="63.6119" rx="12.1705" ry="5.40909" transform="rotate(90 246.341 63.6119)" fill="#C8C8C8" fillOpacity="0.5" />
                <ellipse cx="246.341" cy="136.635" rx="12.1705" ry="5.40909" transform="rotate(90 246.341 136.635)" fill="#C8C8C8" fillOpacity="0.5" />
                <ellipse cx="6.13388" cy="63.6119" rx="12.1705" ry="5.40909" transform="rotate(90 6.13388 63.6119)" fill="#C8C8C8" fillOpacity="0.5" />
                <ellipse cx="6.13388" cy="136.635" rx="12.1705" ry="5.40909" transform="rotate(90 6.13388 136.635)" fill="#C8C8C8" fillOpacity="0.5" />
                <rect x="184.254" y="48.7383" width="102.773" height="148.442" rx="2.70455" transform="rotate(90 184.254 48.7383)" fill="#F9F9F9" />
                <path d="M169.598 70.625C169.598 74.0638 169.005 77.1062 168.105 79.2329C167.654 80.2993 167.155 81.0654 166.678 81.5426C166.207 82.0139 165.843 82.125 165.598 82.125C165.352 82.125 164.989 82.0139 164.517 81.5426C164.04 81.0654 163.541 80.2993 163.09 79.2329C162.19 77.1062 161.598 74.0638 161.598 70.625C161.598 67.1862 162.19 64.1438 163.09 62.0171C163.541 60.9507 164.04 60.1846 164.517 59.7074C164.989 59.2361 165.352 59.125 165.598 59.125C165.843 59.125 166.207 59.2361 166.678 59.7074C167.155 60.1846 167.654 60.9507 168.105 62.0171C169.005 64.1438 169.598 67.1862 169.598 70.625Z" stroke="#D3D3D7" strokeWidth="3" />
                {/* Seats start */}
                <rect x="148.422" y="57.8011" width="25.6477" height="41.6477" rx="7.4375" transform="rotate(90 148.422 57.8011)" fill={seatbelts?.driver_seatbelt_status.value ? "#0F82EA" : "#D3D3D7"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} stroke="#D3D3D7" strokeWidth="1.35227" />
                <rect x="148.422" y="116.801" width="25.6477" height="41.6477" rx="7.4375" transform="rotate(90 148.422 116.801)" fill={seatbelts?.front_passenger_seatbelt_status?.value ? "#0F82EA" : "#D3D3D7"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} stroke="#D3D3D7" strokeWidth="1.35227" />
                <rect x="94.2848" y="54.8246" width="25.6477" height="41.6477" rx="7.4375" transform="rotate(90 94.2848 54.8246)" fill={seatbelts?.left_passenger_seatbelt_status?.value ? "#0F82EA" : "#D3D3D7"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} stroke="#D3D3D7" strokeWidth="1.35227" />
                <rect x="94.2848" y="87.2328" width="25.6477" height="41.6477" rx="7.4375" transform="rotate(90 94.2848 87.2328)" fill={seatbelts?.central_passenger_seatbelt_status?.value ? "#0F82EA" : "#D3D3D7"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} stroke="#D3D3D7" strokeWidth="1.35227" />
                <rect x="94.2848" y="119.643" width="25.6477" height="41.6477" rx="7.4375" transform="rotate(90 94.2848 119.643)" fill={seatbelts?.right_passenger_seatbelt_status?.value ? "#0F82EA" : "#D3D3D7"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} stroke="#D3D3D7" strokeWidth="1.35227" />
                {/* Seats end */}

                {/* Doors start */}
                <rect x="99.75" y="26.375" width="5" height="54" transform={doors?.rear_left_door_status.value ? "rotate(120 99.75 26.375)" : "rotate(90 99.75 26.375)"} fill={doors?.rear_left_door_status.value ? "#0F82EA" : "#E3E3E6"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} />
                <rect x="188.016" y="27.0449" width="5" height="54" transform={doors?.front_left_door_status.value ? "rotate(120 188.016 27.0449)" : "rotate(90 188.016 27.0449)"} fill={doors?.front_left_door_status.value ? "#0F82EA" : "#E3E3E6"} style={{ transition: "transform 0.3s ease, fill 0.3s ease" }} />
                <rect x="99.75" y="26.375" width="5" height="54" transform={doors?.rear_right_door_status.value ? "rotate(60 99.75 26.375)" : "rotate(90 99.75 26.375)"} fill={doors?.rear_right_door_status.value ? "#0F82EA" : "#E3E3E6"} style={{ translate: "0 140px", transition: "transform 0.3s ease, fill 0.3s ease" }} />
                <rect x="188.016" y="27.0449" width="5" height="54" transform={doors?.front_right_door_status.value ? "rotate(60 188.016 27.0449)" : "rotate(90 188.016 27.0449)"} fill={doors?.front_right_door_status.value ? "#0F82EA" : "#E3E3E6"} style={{ translate: "0 140px", transition: "transform 0.3s ease, fill 0.3s ease" }} />
                {/* Doors end */}
            </svg>
        </div>
    )
}

export default Doors