import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core';
import { FiPower, FiTrash } from 'react-icons/fi';
import { switchClasses, toolTipClasses } from 'styles';

export function ManagementPill({
	enabled,
	onChange,
	openModal,
	label = ['Disabled', 'Enabled'],
}: {
	enabled: number;
	onChange: any;
	openModal: () => void;
	label?: [string, string];
}) {
	return (
		<Group
			style={{
				width: 'fit-content',
				backgroundColor:
					'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
				padding: '.5rem',
				borderRadius: '10px',
				color: 'var(--mantine-color-search-0)',
				backdropFilter: 'brightness(0.5)',
			}}
		>
			<Tooltip
				className={toolTipClasses.default}
				classNames={toolTipClasses}
				label={label[enabled]}
				refProp='rootRef'
				withArrow
			>
				<Switch
					className={switchClasses.enable}
					classNames={switchClasses}
					defaultChecked={enabled === 1}
					defaultValue={enabled}
					thumbIcon={
						<FiPower
							style={{
								color: enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
							}}
						/>
					}
					onChange={onChange}
				/>
			</Tooltip>
			|
			<Tooltip
				className={toolTipClasses.default}
				classNames={toolTipClasses}
				label={'Delete'}
			>
				<ActionIcon
					color='red'
					onClick={() => {
						openModal();
					}}
				>
					<FiTrash color='black' />
				</ActionIcon>
			</Tooltip>
		</Group>
	);
}