import { useTranslations } from 'next-intl'
import { type ComponentProps } from 'react'

import { DropdownMenu } from 'radix-ui'

import { TbDotsVertical } from 'react-icons/tb'

import { Dropdown } from '@/components/atoms'

import { rootStyles } from './Actions.styles'

type ActionsProps = ComponentProps<typeof DropdownMenu.Content> & {
	className?: string
	disabled?: boolean
}

function Actions({ sideOffset, disabled, className }: ActionsProps) {
	const t = useTranslations()
	//
	return (
		<Dropdown
			trigger={
				<button className={rootStyles({ disabled, className })}>
					<TbDotsVertical />
				</button>
			}
			sideOffset={sideOffset}
			align='end'
			className='overflow-y-hidden'
		>
			<Dropdown.Item asChild>
				<button>{t('edit')}</button>
			</Dropdown.Item>
			<Dropdown.Item asChild>
				<button>{t('update')}</button>
			</Dropdown.Item>
			<Dropdown.Divider />
			<Dropdown.Item asChild className='text-danger'>
				<button>{t('delete')}</button>
			</Dropdown.Item>
		</Dropdown>
	)
}

export { Actions }
