import { useTranslation } from 'react-i18next';

import SelectionCriteriaCard from '@composed-components/audience/SelectionCriteriaCard';
import { IconUsersGroup } from '@tabler/icons-react';

import { type SegmentationCriteriaCardProps } from './types';

const SegmentationCriteriaCard = ({
  sx,
  showInfo = true,
  ...props
}: SegmentationCriteriaCardProps) => {
  const { t } = useTranslation('material_hu_only');

  return (
    <SelectionCriteriaCard
      {...props}
      Icon={IconUsersGroup}
      title={t('audience.segmentation_groups_title')}
      description={t('audience.segmentation_groups_description')}
      info={showInfo ? t('audience.automatic_update') : undefined}
      infoTooltip={
        showInfo ? t('audience.segmentation_groups_info_tooltip') : undefined
      }
      sx={{ animationDelay: `0ms`, ...sx }}
    />
  );
};

export default SegmentationCriteriaCard;