import React from 'react';
import i18n from 'ui-i18n';
import { isToday } from '@reltio/mdm-sdk';
import Typography from '@mui/material/Typography';
import { Spacer } from '../../../../../Spacer';
import { CollapseButton } from '../../../../../CollapseButton';
import { useStyles } from './styles';
export var GroupItem = function (_a) {
    var _b = _a.item, index = _b.index, timestamp = _b.timestamp, collapsed = _b.collapsed, onToggle = _a.onToggle;
    var styles = useStyles();
    return (React.createElement("div", { className: styles.groupItem, "data-reltio-id": "activity-log-group-item" },
        React.createElement("div", { className: styles.groupIcon }),
        React.createElement(Typography, { className: styles.groupTitle, variant: 'subtitle1' }, isToday(timestamp) ? i18n.text('Today') : i18n.date(timestamp, 'LL')),
        React.createElement(Spacer, null),
        React.createElement(CollapseButton, { isOpen: !collapsed, onClick: function () { return onToggle(index); } })));
};
