import type { ChatBskyActorDefs } from '@atcute/bluesky';
import type { SystemMessageGroupItem } from '#/screens/Messages/components/message-timeline';
import { SystemMessageItem } from '#/components/dms/SystemMessageItem';
import { Text } from '#/components/Text';
import ChevronDown from '#/icons/central/ChevronBottom_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
import * as css from './SystemMessageGroup.css';
export function SystemMessageGroup({
item,
expanded,
onToggle,
relatedProfiles,
}: {
item: SystemMessageGroupItem;
expanded: boolean;
onToggle: (key: string) => void;
relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>;
}) {
const count = item.items.length;
const label = m['components.dms.update.count']({ count });
return (
<div>
<button
aria-expanded={expanded}
aria-label={label}
className={css.toggle}
onClick={() => onToggle(item.key)}
type="button"
>
<Text align="center" color="textContrastMedium" size="xs">
{label}
</Text>
<span className={css.chevron({ expanded })}>
<ChevronDown className={css.chevronDownIcon} />
</span>
</button>
{expanded
? item.items.map((child) => (
<SystemMessageItem key={child.key} item={child} relatedProfiles={relatedProfiles} />
))
: null}
</div>
);
}