import { FC, ReactNode } from 'react';

import { TablerIcon } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

type Props = {
  Icon: TablerIcon;
  info: ReactNode;
};

export const EventItemInfo: FC<Props> = ({ Icon, info }) => {
  const { palette } = useTheme();
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
      }}
    >
      <Icon
        size={20}
        color={palette.new.text.neutral.lighter}
      />
      {info}
    </Stack>
  );
};

export default EventItemInfo;