import { Link } from "@/i18n/routing"
import { IUser } from "@/type/Common"
import { EyeFilled, UserOutlined } from "@ant-design/icons"
import { Avatar, Badge, Flex } from "antd"
import dayjs from "dayjs"
import Image from "next/image"
import { FC } from "react"
interface IProps {
  bgImageUrl: string
  type: string
  authorName: string
  categoryName: string
  createdDate: number | string
  userInfo: IUser | null
  view: number
  currentUser?: IUser
  detailUrl: string
}
const FeedItem: FC<IProps> = (props) => {
  const { bgImageUrl, type, categoryName, createdDate, userInfo, view, currentUser, detailUrl = "" } = props
  const isSelf = currentUser?.id === userInfo?.id
  return (
    <Link
      href={detailUrl}
      scroll>
      <div className="relative w-[268px] xl:h-[200px] h-[170px] rounded-[10px] flex-none cursor-pointer hover:scale-[1.02]">
        <Image
          src={`${bgImageUrl || "/img/default_image.jpg"}`}
          alt={`${bgImageUrl || "no-image"}`}
          fill
          onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
          className="object-cover rounded-[10px] "
        />
        <Flex
          vertical
          justify="space-between"
          className="absolute w-full h-full left-0 top-0 rounded-[10px]">
          <div className="p-4">
            <div className="relative">
              <Badge
                offset={[-5, 34]}
                dot
                styles={{
                  indicator: {
                    width: 10,
                    height: 10,
                  },
                }}
                status="success">
                <Avatar
                  className="!bg-[#FFEBAD] !w-10 !h-10"
                  src={userInfo?.photo || <UserOutlined className="!text-black" />}
                />
              </Badge>
            </div>
          </div>
          <Flex
            vertical
            gap={4}
            className="pt-6 px-4 pb-2 rounded-b-[10px]"
            style={{ background: "linear-gradient(180deg, rgba(255,255,255,0) 10%, rgba(0,0,0,1) 100%)" }}>
            {isSelf && (
              <div className="bg-primary-70 rounded-full w-[54px] h-[18px] flex justify-center items-center">
                <p className="text-white font-medium text-[10px] text-center">SELF</p>
              </div>
            )}
            <p className="font-semibold text-white">{userInfo?.username}</p>
            <p className="font-semibold text-white">
              {type} | {categoryName}
            </p>
            <Flex
              align="center"
              gap={4}>
              <EyeFilled className="!text-white text-xs" />
              <p className="font-light text-xs text-white">{view} seen</p>
              <p className="font-light text-xs text-white opacity-60">*</p>
              <p className="font-light text-xs text-white">{Math.abs(dayjs(dayjs.unix(Number(createdDate))).diff(new Date(), "days"))} days ago</p>
            </Flex>
          </Flex>
        </Flex>
      </div>
    </Link>
  )
}
export default FeedItem