import { Avatar } from "../../atoms";
import { ChevronRightIcon } from "../../../icons";
export interface ProfileSidebarItemProps {
  title: string;
  subTitle?: string;
  avatarUrl: string;
}
const ProfileSidebarItem = ({
  title,
  subTitle,
  avatarUrl,
  ...props
}: ProfileSidebarItemProps) => {
  return (
    <div className="flex items-center justify-between self-stretch" {...props}>
      <div className="flex hover:bg-mono-50 transtion ease-in-out duration-300 items-center gap-3 flex-1 pr-6 py-4">
        <Avatar size="md" image={avatarUrl} />
        <div className="flex flex-col items-start">
          <p className="text-sm text-gray-900 font-medium line-clamp-1">
            {title}
          </p>
          <p className="text-sm font-normal text-gray-600 line-clamp-1">
            {subTitle}
          </p>
        </div>
      </div>
      <div className="pl-4 hover:bg-mono-50 transtion ease-in-out duration-300 py-4 shrink-0">
        <div className="p-2.5">
          <ChevronRightIcon />
        </div>
      </div>
    </div>
  );
};

export { ProfileSidebarItem };
