import { Mail, Phone, Shield, UserRound, BriefcaseBusiness, Building2, Activity } from 'lucide-react';

const statusLabels = {
  active: 'فعال',
  inactive: 'غیرفعال',
  suspended: 'مسدود',
};

function InfoRow({ icon: Icon, label, value }) {
  if (!value) return null;
  return (
    <div className="pwa-profile-info-row">
      <Icon size={17} />
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}

export default function PwaAccountInfoCard({ user }) {
  return (
    <section className="pwa-card-section">
      <div className="pwa-section-title">
        <h2>اطلاعات حساب</h2>
      </div>
      <div className="pwa-profile-info-list">
        <InfoRow icon={UserRound} label="نام و نام خانوادگی" value={user?.name} />
        <InfoRow icon={Mail} label="ایمیل" value={user?.email} />
        <InfoRow icon={Shield} label="نقش اصلی" value={user?.primary_role} />
        <InfoRow icon={BriefcaseBusiness} label="عنوان شغلی" value={user?.job_title} />
        <InfoRow icon={Building2} label="واحد / تیم" value={user?.department} />
        <InfoRow icon={Phone} label="شماره تماس" value={user?.phone} />
        <InfoRow icon={Activity} label="وضعیت حساب" value={statusLabels[user?.status] || user?.status || 'فعال'} />
      </div>
    </section>
  );
}
