"use client";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import LocalePath from "@/components/UiComponents/LocalePath";
import React from "react";
import FavBtnProvider from "../product/FavBtn";
import { FullStarIcon, LocationIcon, VerifiedIcon } from "@/assets/svgs/Icons";
import { useTranslations } from "next-intl";
import { formatNumber } from "@/utils/helpers";
import { useSelector } from "react-redux";
import { RootState } from "@/store/store";
import dynamic from "next/dynamic";
import AppSkeleton from "@/components/UiComponents/Loader/AppSkeleton";

interface Props {
  cardData: {
    company_name: string;
    logo: string;
    location: string;
    rate: number;
    verify: boolean;
  }
}

const Template = ({ cardData }: Props) => {
  const t = useTranslations();
  const { user_type } = useSelector((state: RootState) => state.ProfileConfig);

  return (
    <div className="bg-inherit relative overflow-hidden">
      <div className="flex justify-center items-center relative w-full mt-2">
        <LocalePath
          href={`/trader${user_type == "vendor" ? "s" : ""}/${cardData?.company_name}`}
          className="bg-white border border-greynormal rounded-[10px] p-4 mb-2.5"
        >
          <ImageWithFallback
            src={cardData?.logo || ""}
            width={200}
            height={200}
            className="w-full h-[150px] sm:h-[246px] object-contain"
            alt={cardData?.company_name}
          />
        </LocalePath>
        <div className="absolute top-1.5 w-full flex items-center justify-between px-1.5">
          <FavBtnProvider type="trader" product={cardData} />
          {cardData?.verify && (
            <div className={`text-xs md:text-sm font-normal leading-4 text-start text-primary`}>
              <span className="flex items-center gap-1">
                <VerifiedIcon className="lg:size-5" />
                {t(`Text.verified`)}
              </span>
            </div>
          )}
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <div className="text-[#FFB01D] text-sn font-medium flex gap-1 items-center">
          <FullStarIcon />
          {formatNumber(cardData?.rate)}
        </div>
        <LocalePath href={`/traders/${cardData?.company_name}`}>
          <h2 className="text-sm  font-medium leading-5 text-start line-clamp-1 truncate  ">
            {cardData?.company_name}
          </h2>
        </LocalePath>
        {cardData.location && (
          <div className="flex items-center gap-2 text-sm text-gray-300 truncate whitespace-nowrap ">
            <LocationIcon className="min-w-4" />
            {cardData.location}
          </div>
        )}
      </div>
    </div>
  );
};

const TraderCard = dynamic(() => Promise.resolve(Template), {
  ssr: false,
  loading:()=><AppSkeleton width="100%" height="350px" className="!h-[250px] md:!h-[350px]" />  
});

export default TraderCard;