import { cn } from '@langgenius/dify-ui/cn'
import { cva } from 'class-variance-authority'
import {
  memo,
} from 'react'
import { useTranslation } from 'react-i18next'

type Props = {
  type?: 'info'
  message: string
  onHide: () => void
  className?: string
}
const bgVariants = cva(
  '',
  {
    variants: {
      type: {
        info: 'from-components-badge-status-light-normal-halo to-background-gradient-mask-transparent',
      },
    },
  },
)
const Alert: React.FC<Props> = ({
  type = 'info',
  message,
  onHide,
  className,
}) => {
  const { t } = useTranslation()

  return (
    <div className={cn('pointer-events-none w-full', className)}>
      <div
        className="relative flex space-x-1 overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg"
      >
        <div className={cn('pointer-events-none absolute inset-0 bg-linear-to-r opacity-[0.4]', bgVariants({ type }))} data-testid="alert-gradient">
        </div>
        <div className="flex size-6 items-center justify-center">
          <span className="i-ri-information-2-fill text-text-accent" data-testid="info-icon" />
        </div>
        <div className="p-1">
          <div className="system-xs-regular text-text-secondary" data-testid="msg-container">
            {message}
          </div>
        </div>
        <button
          type="button"
          aria-label={t('operation.close', { ns: 'common' })}
          className="pointer-events-auto flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-button-secondary-accent-border"
          onClick={onHide}
        >
          <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
        </button>
      </div>
    </div>
  )
}

export default memo(Alert)