import { FC } from 'react';
import { twx } from '../../lib/utils';
import { Group } from './group';

type IconWithTextProps = {
  textClassName?: string;
  icon: string;
  value: string;
};

export const IconWithText: FC<IconWithTextProps> = ({
  textClassName,
  icon,
  value,
}) => {
  return (
    <Group className="gap-1 text-black/50">
      <div className="h-6 w-6 flex items-center justify-center rounded-full bg-zinc-200">
        <div className={`${icon} text-base`} />
      </div>
      <p className={twx('text-black/90', textClassName)}>{value}</p>
    </Group>
  );
};
