import { HTMLAttributes } from 'react';
import { IconButton } from 'rsuite';

interface ProfileInfoProps extends HTMLAttributes<HTMLDivElement> {
  iconImage?: string;
  title?: string;
  subTitle?: string;
  subTitleStyle?: string;
  fontWeight?: 'fw-light' | 'fw-normal' | 'fw-bold';
  containerStyle?: string;
}

const ProfileInfo = ({
  iconImage,
  title,
  subTitle,
  subTitleStyle,
  fontWeight = 'fw-bold',
  containerStyle,
  ...props
}: ProfileInfoProps) => {
  return (
    <div
      className={`d-flex justify-content-start gap-2 align-items-start ${containerStyle}`}
      {...props}
    >
      <IconButton icon={<img src={iconImage} alt="" />} />
      <div className="d-flex flex-column justify-content-start align-items-start">
        <h6 className="text-light-grey-2 mb-1 fs-10">{title}</h6>
        <h5 className={`fs-lg-12 fs-10  mb-0 pb-0   ${fontWeight}`}>
          {subTitle}
        </h5>
      </div>
    </div>
  );
};

export default ProfileInfo;