import { useOutletContext } from 'react-router-dom';
import Header from '../components/Layout/Header';
import { formatDate } from '../utils/date';

export default function AccountPage() {
  const { user, setMobileOpen } = useOutletContext();

  return (
    <div>
      <Header title="حساب کاربری" user={user} onMenuClick={() => setMobileOpen?.(true)} />
      <div className="card max-w-lg">
        <div className="flex items-center gap-4 mb-6">
          <div className="w-16 h-16 rounded-full bg-accent flex items-center justify-center text-2xl font-bold">
            {user?.fullName?.[0]}
          </div>
          <div>
            <h3 className="text-xl font-bold">{user?.fullName}</h3>
            <p className="text-gray-500 text-sm" dir="ltr">{user?.email}</p>
          </div>
        </div>
        <dl className="space-y-4 text-sm">
          <div className="flex justify-between py-2 border-b border-navy-700">
            <dt className="text-gray-500">شماره موبایل</dt>
            <dd dir="ltr">{user?.phone || '—'}</dd>
          </div>
          <div className="flex justify-between py-2 border-b border-navy-700">
            <dt className="text-gray-500">پکیج اشتراک</dt>
            <dd>{user?.planMonths?.toLocaleString('fa-IR')} ماهه</dd>
          </div>
          <div className="flex justify-between py-2">
            <dt className="text-gray-500">تاریخ انقضا</dt>
            <dd className="text-amber-400">{formatDate(user?.subscriptionExpiresAt)}</dd>
          </div>
        </dl>
      </div>
    </div>
  );
}
