import React from 'react';
import { AttributesT } from '../../utils/constants';
import { BumperWidth } from '../AttributeComponents/BumperWidth/BumperWidth';
import { FrontBumper } from '../AttributeComponents/FrontBumper/FrontBumper';
import { Lift } from '../AttributeComponents/Lift/Lift';
import { LightBar } from '../AttributeComponents/LightBar/LightBar';
import { PaintColor } from '../AttributeComponents/PaintColor/PaintColor';
import { RearBumper } from '../AttributeComponents/RearBumper/RearBumper';
import { SideSteps } from '../AttributeComponents/SideSteps/SideSteps';
import { Tires } from '../AttributeComponents/Tires/Tires';
import { WheelColor } from '../AttributeComponents/WheelColor/WheelColor';
import { Wheels } from '../AttributeComponents/Wheels/Wheels';
import s from './ComponentControl.module.scss';

export const ComponentControl = ({ ...props }) => {
  const attr: AttributesT = props.attr;
  if (attr === 'Bumper Width') {
    return <BumperWidth name={attr} />;
  } else if (attr === 'Front Bumper') {
    return <FrontBumper name={attr} />;
  } else if (attr === 'Lift') {
    return <Lift name={attr} />;
  } else if (attr === 'Light Bar') {
    return <LightBar name={attr} />;
  } else if (attr === 'Paint color') {
    return <PaintColor name={attr} />;
  } else if (attr === 'Rear Bumper') {
    return <RearBumper name={attr} />;
  } else if (attr === 'Side steps') {
    return <SideSteps name={attr} />;
  } else if (attr === 'Tire') {
    return <Tires name={attr} />;
  } else if (attr === 'Wheel Color') {
    return <WheelColor name={attr} />;
  } else if (attr === 'Wheels') {
    return <Wheels name={attr} />;
  } else {
    return <></>;
  }
};