import { ActionIcon, Box, Group, Text } from '@mantine/core';
import { useState } from 'react';
import { FiEdit } from 'react-icons/fi';

function BookmarkSettingsItem({ bookmark }: any) {
	const [hover, setHover] = useState(false);
	return (
		<Box
			style={{
				cursor: 'pointer',
				borderRadius: '4px',
				color: 'var(--color-text-acc)',
				backgroundColor: 'var(--color-search-background)',
				padding: '8px',
			}}
			onMouseEnter={() => setHover(true)}
			onMouseLeave={() => setHover(false)}
		>
			<Group>
				<Text>{bookmark.name}</Text>
				{hover && (
					<ActionIcon
						variant='subtle'
						style={{
							position: 'absolute',
							right: 24,
							color: 'var(--color-text-acc)',
						}}
					>
						<FiEdit />
					</ActionIcon>
				)}
			</Group>
		</Box>
	);
}

export default BookmarkSettingsItem;