atlp-rwanda/hackers-ec-Fe

import React from 'react';

interface UserProfileHeaderProps {
    image?: string;
    firstName?: string;
    handleImageChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    upload?: string;
}

function UserProfileHeader({
    image,
    handleImageChange,
    upload,
    firstName,
}: UserProfileHeaderProps) {
    return (
        <div className="flex justify-around px-8 gap-10 items-center py-4 ipad:w-[50%] tablet:gap-2">
            <div className="bg-custom-gradient absolute w-[100%] h-[20rem] top-[-8rem] rounded-3xl z-0 ipad:rounded-full ipad:h-[35rem] ipad:w-[50%] ipad:top-[-20rem] ipad:rotate-[-10deg]"></div>
            <div className="h-auto tablet:px-6 flex z-10">
                <div className="w-[6rem] tablet:w-[10rem] flex justify-center items-center">
                    <img
                        src={image}
                        alt="profile image"
                        className="rounded-full w-24 h-16 tablet:w-96 tablet:h-32 border-4 border-neutral-white"
                    />
                </div>

                <div>
                    <input
                        type="file"
                        accept="image/*"
                        onChange={handleImageChange}
                        className="hidden"
                        id="profileImageUpload"
                    />
                    <label
                        htmlFor="profileImageUpload"
                        className="w-full max-w-[5rem] cursor-pointer"
                    >
                        <img
                            src={upload}
                            alt="upload icon"
                            className="block mt-[5rem] cursor-pointer"
                        />
                    </label>
                </div>
            </div>
            <div className="text-neutral-white mx-4 tablet:mx-6 z-10">
                <h1 className="font-semibold text-sm py-2 tablet:text-4xl">
                    Hello, {firstName}
                </h1>
                <p className="font-medium text-[0.6rem] tablet:text-[1rem]">
                    This is your profile page, feel free to update your personal
                    information
                </p>
            </div>
        </div>
    );
}

export default UserProfileHeader;