import React, { FC } from "react";

export interface processProps {
  color?: string;
  value?: number;
}
export interface ItemCompProps {
  className?: string;
  left?: any;
  center?: any;
  right?: any;
  leftClassName?: string;
  centerClassName?: string;
  rightClassName?: string;
  process?: processProps;
}
const ItemComp: FC<ItemCompProps> = props => {
  const { className, left, leftClassName, center, centerClassName, right, rightClassName, process } = props;

  return (
    <div className={`flex items-center justify-between relative ${className}`}>
      <div
        className={`absolute right-0 bg-red h-full z-0 ${process?.color}`}
        style={{ width: `${Number(process?.value || 0)}%` }}
      ></div>
      <div className={`min-w-[65px] ml-[16px] ${leftClassName}`}>{left}</div>
      <div className={`min-w-[55px] text-right ${centerClassName}`}>{center}</div>
      <div className={`min-w-[55px] mr-[16px] text-right ${rightClassName}`}>{right}</div>
    </div>
  );
};

export default ItemComp;