import Image from "next/image";
import React from "react";
import { FaRegUser } from "react-icons/fa";

interface Props {
    prefix: string;
    name: string;
    profileImage: string;
}

export default function RequestedBy({ prefix, name, profileImage }: Props) {
    return (
        <div className="flex items-center space-x-3">
            <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
                <FaRegUser className="text-mti-purple-dark size-5"/>
            </div>
            <div>
                <p className="text-sm font-medium text-gray-800">Requested by</p>
                <div className="flex items-center space-x-2">
                    <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
                    <img
                        src={profileImage ? profileImage : "/defaultAvatar.png"}
                        alt={name}
                        width={24}
                        height={24}
                        className="w-6 h-6 rounded-full border-[1px] border-gray-400 border-opacity-50"
                    />
                </div>
            </div>
        </div>
    );
};