import { Avatar, Button } from "../../atoms";
import { PlusIcon } from "../../../icons";
export interface ProfileCommunityLinkItemProps {
  title: string;
  subTitle?: string;
  avatarUrl: string;
}
const ProfileCommunityLinkItem = ({
  title,
  avatarUrl,
  ...props
}: ProfileCommunityLinkItemProps) => {
  return (
    <div
      className="flex items-center justify-between self-stretch py-4"
      {...props}
    >
      <div className="flex items-center gap-3 flex-1">
        <Avatar size="md" imageAvatarClassName="rounded-lg" image={avatarUrl} />
        <p className="text-sm text-gray-900 font-medium line-clamp-1">
          {title}
        </p>
      </div>
      <div className="shrink-0">
        <Button variant="gray-outline" size="sm" leftIcon={<PlusIcon />}>
          Follow
        </Button>
      </div>
    </div>
  );
};

export { ProfileCommunityLinkItem };
