'use client'
import type { FC } from 'react'
import React, { useRef } from 'react'
import { useHover } from 'ahooks'
import { RiResetLeftLine } from '@remixicon/react'
import Tooltip from '@/app/components/base/tooltip'
import { useTranslation } from 'react-i18next'

type Props = {
  onReset: () => void
}

const EditedBeacon: FC<Props> = ({
  onReset,
}) => {
  const { t } = useTranslation()
  const ref = useRef(null)
  const isHovering = useHover(ref)

  return (
    <div ref={ref} className='size-4 cursor-pointer'>
      {isHovering ? (
        <Tooltip popupContent={t('common.operation.reset')}>
          <div className='flex size-4 items-center justify-center rounded-full bg-text-accent-secondary' onClick={onReset}>
            <RiResetLeftLine className='size-[10px] text-text-primary-on-surface' />
          </div>
        </Tooltip>
      ) : (
        <div className='flex size-4 items-center justify-center'>
          <div className='size-1 rounded-full bg-text-accent-secondary'></div>
        </div>
      )}
    </div>
  )
}
export default React.memo(EditedBeacon)