import clsx from 'clsx'

import { texts } from '@/texts'

interface Props {
  className?: string
  isDirty: boolean
}

export default function UnsavedChangesIndicator({ className, isDirty }: Props) {
  return (
    <span
      aria-live="polite"
      className={clsx(
        'inline-flex w-fit items-center gap-2 rounded-full px-3 py-1 text-smt-medium',
        isDirty ? 'bg-fourth-100 text-fourth-900' : 'bg-fifth-50 text-fifth-700',
        className
      )}
      role="status"
    >
      <span
        aria-hidden
        className={clsx('size-2 rounded-full', isDirty ? 'bg-fourth-1000' : 'bg-fifth-500')}
      />
      {isDirty ? texts.common.unsavedChanges : texts.common.noUnsavedChanges}
    </span>
  )
}