import { Button } from "antd";
import { FC, useEffect, useState } from "react";
import { capitalizeWords, getDiscountPercent, getDiscountPercentHome } from "../../../constants/commonFunction";

import styles from "./popularSeller.module.scss";
import cx from "classnames";
import { useRouter } from "next/router";
import * as CommonApi from "../../../pages/api/common";
import { baseUrl, defaultImg } from "../../../constants/urls";
import Link from "next/link";

const PopularSeller: FC<any> = ({ title = "", bearingData = {} }) => {

    const router = useRouter();
    const [category, setCategory] = useState([]);
    useEffect(() => {
        CommonApi.getRequest(`${baseUrl}/api/home/popular-sellers`).then((res) => {
            setCategory(res?.data?.data)
        })
    }, [])

    return (
        <>
           
                <div className={styles.containerCategory}>
                <div className="container">
                    <div className={styles.sectionSubTitle}>Our Popular Sellers</div>

                    <div className={styles.cardContainer}>
                        {category.map((product: any, idx: number) => {
                            return <div className={styles.card} key={idx}>
                                <div className={styles.imgContainer}>
                                    <img src={product?.logo == null ? defaultImg : product?.logo} alt="logo" className={styles.image} />
                                </div>
                                <div className={styles.cardTitle}>{capitalizeWords(product?.shop_title)}</div>
                                <Link href={`/seller/${product?.url}`}>
              <a>
                                <Button type="primary" className={cx("mt-4", styles.button)}>View Products</Button>
                                </a>
                                </Link>
                            </div>
                        })}
                    </div>
                </div>
            </div>
        </>
    )

}

export default PopularSeller;