import React from 'react';
import conditionBadges from '../configs/conditionBadges';

export interface ConditionBadgeProps {
  condition: keyof typeof conditionBadges;
  direction?: 'left' | 'right';
  top?: string;
  right?: string;
}

const ConditionBadge = ({
  condition,
  top = 'top-1',
  right = 'right-1',
  direction = 'left',
}: ConditionBadgeProps) => {
  return (
    <div
      className={`h-7 w-[125px] relative mb-2 ${top} ${right} flex justify-start items-center w-max max-w-full overflow-hidden drop-shadow-xs ${conditionBadges[condition].theme}`}
      style={{
        clipPath:
          direction === 'left'
            ? 'polygon(6px 0, 100% 0%, 100% 100%, 0% 100%)'
            : 'polygon(0 0, 100% 0, 90% 100%, 0% 100%)',
      }}
    >
      <i
        className={`${conditionBadges[condition].icon} text-3xl font-normal relative top-0.5 right-1.5`}
      />

      <span className={`relative font-bold capitalize text-xs mr-2`}>
        {conditionBadges[condition].title}
      </span>
    </div>
  );
};

export default ConditionBadge;