export function LoadingPanel({ title = 'Загрузка...' }: { title?: string }) {
  return (
    <div className="grid min-h-[320px] place-items-center rounded-[16px] border border-[#24314f] bg-[#121b2e]">
      <div className="text-center">
        <div className="text-3xl font-semibold tracking-tight text-white">{title}</div>
        <div className="mt-3 text-base text-slate-400">Подтягиваю данные и подготавливаю экран.</div>
      </div>
    </div>
  )
}

export function ErrorPanel({
  title = 'Не удалось загрузить данные',
  description = 'Проверь соединение с сервером и попробуй ещё раз.',
  onRetry,
}: {
  title?: string
  description?: string
  onRetry?: () => void
}) {
  return (
    <div className="grid min-h-[320px] place-items-center rounded-[16px] border border-dashed border-[#31405f] bg-[#121b2e]">
      <div className="max-w-xl text-center">
        <div className="text-3xl font-semibold tracking-tight text-white">{title}</div>
        <div className="mt-3 text-base text-slate-400">{description}</div>
        {onRetry ? (
          <button className="mt-6 rounded-[10px] bg-[#15c98b] px-6 py-3 text-base font-medium text-[#081225]" onClick={onRetry} type="button">
            Повторить
          </button>
        ) : null}
      </div>
    </div>
  )
}