'use client';

import Link from 'next/link';
import { useT } from '@/i18n';

export default function MyPage() {
  const t = useT();
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-foreground">{t.nav.my}</h1>
        <p className="mt-2 text-muted-foreground">{t.my.desc}</p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <Link href="/my/learning" className="bg-card rounded-xl border border-border p-6 hover:shadow-md transition-shadow block">
          <div className="w-12 h-12 bg-brand-100 rounded-xl flex items-center justify-center text-brand-600 text-xl mb-4">📚</div>
          <h3 className="font-semibold text-foreground mb-2">{t.my.learningProgress}</h3>
          <p className="text-sm text-muted-foreground">{t.my.learningProgressDesc}</p>
        </Link>
        <Link href="/my/favorites" className="bg-card rounded-xl border border-border p-6 hover:shadow-md transition-shadow block">
          <div className="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center text-red-600 text-xl mb-4">❤️</div>
          <h3 className="font-semibold text-foreground mb-2">{t.my.favorites}</h3>
          <p className="text-sm text-muted-foreground">{t.my.favoritesDesc}</p>
        </Link>
        <Link href="/my/member" className="bg-card rounded-xl border border-border p-6 hover:shadow-md transition-shadow block">
          <div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center text-amber-600 text-xl mb-4">👑</div>
          <h3 className="font-semibold text-foreground mb-2">{t.my.memberCenter}</h3>
          <p className="text-sm text-muted-foreground">{t.my.memberDesc}</p>
        </Link>
        <Link href="/my/settings" className="bg-card rounded-xl border border-border p-6 hover:shadow-md transition-shadow block">
          <div className="w-12 h-12 bg-muted rounded-xl flex items-center justify-center text-muted-foreground text-xl mb-4">⚙️</div>
          <h3 className="font-semibold text-foreground mb-2">{t.my.settings}</h3>
          <p className="text-sm text-muted-foreground">{t.my.settingsDesc}</p>
        </Link>
        <Link href="/learning/analytics" className="bg-card rounded-xl border border-border p-6 hover:shadow-md transition-shadow block">
          <div className="w-12 h-12 bg-brand-100 rounded-xl flex items-center justify-center text-brand-600 text-xl mb-4">📊</div>
          <h3 className="font-semibold text-foreground mb-2">{t.learning.analytics}</h3>
          <p className="text-sm text-muted-foreground">{t.my.analyticsDesc}</p>
        </Link>
        <Link href="/learning/path" className="bg-card rounded-xl border border-border p-6 hover:shadow-md transition-shadow block">
          <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center text-green-600 text-xl mb-4">🗺️</div>
          <h3 className="font-semibold text-foreground mb-2">{t.learning.path}</h3>
          <p className="text-sm text-muted-foreground">{t.my.pathDesc}</p>
        </Link>
      </div>
    </div>
  );
}
