'use client';

import React from 'react';
import { useAuth } from '@/context/AuthContext';
import { useLanguage } from '@/context/LanguageContext';
import styles from './account.module.css';

export default function AccountDashboard() {
  const { user } = useAuth();
  const { t, language } = useLanguage();

  if (!user) return null;

  return (
    <div>
      <h1 className={styles.pageTitle}>🏠 {t.account.title}</h1>
      <p style={{ color: 'var(--text-secondary)', marginBottom: '32px' }}>
        {language === 'ar' ? `مرحباً بك مجدداً، ${user.name}!` : `Welcome back, ${user.name}!`}
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '20px' }}>
        <div className={styles.card}>
          <div style={{ fontSize: '2rem', marginBottom: '12px' }}>📦</div>
          <h3 style={{ fontFamily: 'Orbitron, Cairo, sans-serif', fontSize: '1.1rem', marginBottom: '8px', color: 'var(--text-primary)' }}>{t.account.orders}</h3>
          <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>View and track your recent orders.</p>
        </div>
        
        <div className={styles.card}>
          <div style={{ fontSize: '2rem', marginBottom: '12px' }}>📍</div>
          <h3 style={{ fontFamily: 'Orbitron, Cairo, sans-serif', fontSize: '1.1rem', marginBottom: '8px', color: 'var(--text-primary)' }}>{t.account.addresses}</h3>
          <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>Manage your delivery addresses.</p>
        </div>

        <div className={styles.card}>
          <div style={{ fontSize: '2rem', marginBottom: '12px' }}>🎁</div>
          <h3 style={{ fontFamily: 'Orbitron, Cairo, sans-serif', fontSize: '1.1rem', marginBottom: '8px', color: 'var(--text-primary)' }}>Loyalty Points</h3>
          <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}><strong style={{ color: 'var(--neon-orange)' }}>{user.loyaltyPoints || 0}</strong> points available.</p>
        </div>
      </div>
    </div>
  );
}
