import { Divider, Group } from '@mantine/core';
import type { SearchShortcut } from 'types';
import HintItem from './HintItem';

function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
	return (
		<>
			<h3
				style={{
					zIndex: 0,
					padding: '8px',
					marginTop: 0,
					marginBottom: -32,
					borderRadius: '8px',
					color: 'var(--mantine-color-background-0)',
					backgroundColor: 'var(--mantine-color-border-0)',
				}}
			>
				{name}
			</h3>
			<Divider py={8} color={'var(--mantine-color-accent-0)'} />
			<Group
				style={{
					width: '100%',
					backgroundColor: 'var(--mantine-color-search-0)',
					borderRadius: '8px',
					padding: '24px',
					justifyItems: 'center',
				}}
			>
				{items
					?.toSorted((a: SearchShortcut, b: SearchShortcut) =>
						a.command > b.command ? 1 : -1,
					)
					.map((item: SearchShortcut) => (
						<HintItem key={item.command} command={item.command} name={item.name} />
					))}
			</Group>
		</>
	);
}

export default HelpSection;