import { t } from '@/i18n';

/** Root loading UI: a calm, low-contrast skeleton with reserved heights (no spinner, no layout jump). */
export default function Loading() {
  return (
    <div className="animate-fade py-8" aria-busy="true" aria-label={t('common.loading')}>
      <div className="h-8 w-2/3 max-w-md rounded-sm bg-surface-2" />
      <div className="mt-3 h-4 w-1/2 max-w-sm rounded-sm bg-surface-2" />
      <div className="mt-8 grid gap-6 min-[361px]:grid-cols-2 md:grid-cols-4">
        {Array.from({ length: 8 }, (_, i) => (
          <div key={i} className="border-t border-rule pt-3">
            <div className="h-3 w-24 rounded-sm bg-surface-2" />
            <div className="mt-3 h-7 w-28 rounded-sm bg-surface-2" />
            <div className="mt-2 h-3 w-20 rounded-sm bg-surface-2" />
          </div>
        ))}
      </div>
    </div>
  );
}