'use client'

import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'

type TFunction = (key: string) => string

export function UserManagementInitialLoading({ t }: { t: TFunction }) {
  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)] flex items-center justify-center">
      <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur text-center">
        <div className="h-12 w-12 rounded-full border-2 border-slate-900 border-b-transparent animate-spin mx-auto mb-4" />
        <p className="text-slate-800 font-medium">{t('autofix.kfd6e0974')}</p>
      </div>
    </div>
  )
}

export function UserManagementAccessDenied({ t }: { t: TFunction }) {
  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)] flex items-center justify-center px-4">
      <div className="mx-auto w-full max-w-xl rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
        <div className="text-center">
          <ExclamationTriangleIcon className="mx-auto h-12 w-12 text-red-500 mb-4" />
          <h1 className="text-2xl font-bold text-red-600 mb-2">{t('autofix.k26fbc186')}</h1>
          <p className="text-slate-600">{t('autofix.k661c032b')}</p>
        </div>
      </div>
    </div>
  )
}