import { Autocomplete } from '@base-ui/react/autocomplete';
import { Text } from '#/components/Text';
import ClockIcon from '#/icons/central/Clock_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
import type { SearchHistoryEntry } from '#/storage';
import type { ListRow } from './model';
import * as styles from './RecentQueryRow.css';
import { RecentRemoveButton } from './RecentRemoveButton';
/** a recent-history search query, with a control to drop it from the stored history. */
export function RecentQueryRow({
onRemoveRecent,
row,
}: {
onRemoveRecent: (entry: SearchHistoryEntry) => void;
row: Extract<ListRow, { kind: 'recentQuery' }>;
}) {
return (
<div className={styles.row}>
<Autocomplete.Item className={styles.item} value={row}>
<ClockIcon className={styles.icon} />
<Text className={styles.label}>{row.query}</Text>
</Autocomplete.Item>
<RecentRemoveButton
label={m['components.web.search.recent.removeA11y']({ query: row.query })}
onRemove={() => onRemoveRecent({ kind: 'query', query: row.query })}
/>
</div>
);
}