'use client';

import {Clock3} from 'lucide-react';
import type {Locale} from '@/lib/catalog';

export function AccountLoadingLine({active=true,locale='fa'}:{active?:boolean;locale?:Locale}){
 const label=locale==='en'?'Updating your account…':locale==='ar'?'جارٍ تحديث الحساب…':'در حال به‌روزرسانی…';
 return <output className="account-loading-line" data-active={active} aria-live="polite">
  <div className="account-loading-track" aria-hidden="true"><i/></div>
  <span><Clock3 size={13} aria-hidden="true"/>{active?label:null}</span>
 </output>;
}

export function DashboardLoading({locale='fa',active=true}:{locale?:Locale;active?:boolean}){
 return <section className="dash-card dashboard-loading-card" aria-busy={active}>
  <AccountLoadingLine active={active} locale={locale}/>
  <div className="dashboard-skeleton" aria-hidden="true">
   <div className="dashboard-skeleton-heading"><i className="skeleton-orb"/><div><i/><i/></div></div>
   <div className="dashboard-skeleton-grid">{[0,1,2,3,4,5].map(i=><div key={i}><i/><i/></div>)}</div>
  </div>
 </section>;
}

export function AccountHeaderLoading(){
 return <span className="customer-actions account-header-loading" aria-busy="true" aria-label="در حال آماده‌سازی حساب">
  {[0,1,2].map(i=><span className="account-trigger" key={i} aria-hidden="true"/>)}
 </span>;
}