import { FiX, FiEdit2 } from "react-icons/fi";

interface Account {
  id: number;
  isDefault: boolean;
  name: string;
}

interface UserData {
  id: number;
  name: string;
  email: string;
  language: string;
  account: Account;
}

interface UserProfileProps {
  userData: UserData;
}

const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
  return (
    <div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 gap-6">
      {/* Profile Picture */}
      <div className="flex-shrink-0 text-center">
        <div className="w-20 h-20 bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
          {userData.name.slice(0, 2).toUpperCase()}
        </div>
      </div>

      {/* Info Fields */}
      <div className="flex flex-col justify-center flex-1 w-full">
        {/* Row: Name */}
        <div className="flex flex-col sm:flex-row py-1">
          <div className="text-gray-500 font-medium text-[13px] sm:w-32">Name</div>
          <div className="text-gray-400 font-medium text-[13px]">{userData.name}</div>
        </div>

        {/* Row: Email */}
        <div className="flex flex-col sm:flex-row py-1">
          <div className="text-gray-500 font-medium text-[13px] sm:w-32">Email</div>
          <div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
        </div>

        {/* Row: Account Name */}
        <div className="flex flex-col sm:flex-row py-1">
          <div className="text-gray-500 font-medium text-[13px] sm:w-32">Account name</div>
          <div className="text-gray-400 font-medium text-[13px]">
            {userData.account.name}
          </div>
        </div>
      </div>
    </div>
  );
};

export default UserProfile;