import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/mousewheel";
import "swiper/css/scrollbar";
import { Navigation, Mousewheel, Scrollbar } from "swiper/modules";
import { CollectionLink } from "../CollectionLink/CollectionLink";
import Link from "next/link";
import { Avatar, Button } from "flowbite-react";

export const ProfileActivityFriends = (props: { content: any }) => {
  return (
    <div className="max-w-full">
      <Swiper
        modules={[Navigation, Mousewheel, Scrollbar]}
        spaceBetween={8}
        slidesPerView={"auto"}
        direction={"horizontal"}
        mousewheel={{
          enabled: true,
          sensitivity: 4,
        }}
        scrollbar={{
          enabled: true,
          draggable: true,
        }}
        allowTouchMove={true}
        style={
          {
            "--swiper-scrollbar-bottom": "0",
          } as React.CSSProperties
        }
      >
        {props.content &&
          props.content.length > 0 &&
          props.content.map((profile) => {
            return (
              <SwiperSlide
                key={`friend-prev-${profile.id}`}
                style={{ width: "fit-content" }}
                className="px-2 py-4"
              >
                <Link href={`/profile/${profile.id}`}>
                  <div className="flex items-center gap-2">
                    <Avatar
                      img={profile.avatar}
                      size="md"
                      rounded={true}
                      bordered={true}
                      color={profile.is_online ? "success" : "light"}
                      className="flex-shrink-0"
                    />
                    <p className="text-lg">{profile.login}</p>
                  </div>
                </Link>
              </SwiperSlide>
            );
          })}
        {props.content && props.content.length > 0 ?
          <SwiperSlide style={{ width: "fit-content" }} className="px-2 py-4">
            <Button>
              <p className="text-lg">Все друзья</p>
              <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
            </Button>
          </SwiperSlide>
        : <p className="text-lg">У пользователя нет друзей</p>}
      </Swiper>
    </div>
  );
};