import { JSX } from '@redneckz/uni-jsx';
import { type ComponentType } from '../../model/ComponentType';
import { Img } from '../../ui-kit/Img/Img';
import { Text } from '../../ui-kit/Text/Text';
import { type TextColor } from '../../ui-kit/Text/TextProps';
import { style } from '../../utils/style';

const colorStyle: Record<string, { border: string; text: TextColor }> = {
  yellow: { border: 'border-yellow-light', text: 'text-yellow' },
  green: { border: 'border-green-more-light', text: 'text-green-dark' },
  gray: { border: 'border-gray', text: 'text-secondary-text' },
  red: { border: 'border-error/30', text: 'text-error' },
};

export interface BadgeProps extends ComponentType {
  color?: keyof typeof colorStyle;
}

export const Badge = JSX<BadgeProps>(({ className, children, color = 'gray' }) => (
  <div
    className={style(
      'sm:p-s sm:border sm:border-green rounded-md flex items-center h-fit',
      colorStyle[color].border,
      className,
    )}
  >
    <div className="block pr-m sm:pr-0 sm:hidden">
      <Img image={{ icon: 'SmallClockIcon' }} width="24" height="24" />
    </div>
    <Text size="text-m" color={colorStyle[color].text}>
      {children}
    </Text>
  </div>
));