import { TabItemProps } from '@/utils/HookFormTypes';
import style from './index.module.scss';

const TabItem = ({ image, Title, Subtitle, isReversed }: TabItemProps) => {
  return (
    <div
      className={`${style.tabItem} rounded-3 d-flex gap-3 justify-content-start align-items-center shadow-md`}
    >
      {image}
      <div
        className={`d-flex flex-column ${isReversed && 'flex-column-reverse'} justify-content-start align-items-start`}
      >
        <h5 className=" fs-5 mb-0">{Title}</h5>
        <h6 className="pb-0 mb-0 text-light-grey-2">{Subtitle}</h6>
      </div>
    </div>
  );
};

export default TabItem;