"use client";
import React from "react";
import { useTranslation } from "react-i18next";
import BoldIcon from "@/components/ui/BoldIcon";
import IdeaComponent from "./IdeaComponent";

interface SampleSellerCart {
  special: boolean;
  point: number;
  typeOfSale: string;
  storeLocation: string;
  storeWorkingHours: string;
  style: string;
}

export default function SellersCart(props: SampleSellerCart) {
  const { t } = useTranslation("common");
  
  



  return (
    <div
    className={`${props.style} max-laptop-sl:h-[386px] max-laptop-sl:max-w-[250px] max-laptop-sl:min-w-[250px] bg-white dark:bg-neutral-800 h-[481px] max-desktop-2xl:h-[433px] w-[395px] border-2 rounded-2xl max-laptop-sl:gap-3 gap-2 max-desktop-2-3xl:max-w-[330px] max-desktop-2-3xl:min-w-[330px] max-desktop-2xl:max-w-[280px] max-desktop-2xl:min-w-[280px] ${
      props.special
        ? "border-amber-300 shadow-[0_0_20px_#fbbf24] dark:border-neutral-300 dark:shadow-[0_0_20px_#d4d4d4]"
        : "border-cyan-600 shadow-[0_0_5px_#38bdf8] dark:border-neutral-600 dark:shadow-[0_0_5px_#525252] "
    } flex items-center flex-col`}
  >
    <div
      className={`size-44 max-laptop-sl:size-26 max-desktop-2xl:size-36 border ${
        props.special
          ? "border-amber-300 shadow-[0_0_20px_#fbbf24] dark:border-neutral-300 dark:shadow-[0_0_20px_#d4d4d4]"
          : "border-cyan-600 shadow-[0_0_5px_#38bdf8] dark:border-neutral-600 dark:shadow-[0_0_5px_#525252]"
      } mt-4 flex justify-center items-center rounded-full bg-white dark:bg-neutral-800`}
    >
      <img
        src="/image/logo/Frame 133.png"
        alt="logo"
        className="rounded-full"
      />
    </div>
  
    <div className="flex gap-2.5 flex-row-reverse rtl:flex-row">
      <p className="font-semibold text-[16px] text-black dark:text-white max-laptop-sl:text-sm">
        فروشگاه بین المللی یلسو
      </p>
      {props.special && (
        <p className="flex justify-center rounded-full  dark:bg-neutral-400 text-[12px] text-white h-[22px] w-[51px] bg-amber-300 ">
          ویژه
        </p>
      )}
    </div>
  
    <div className="text-[14px] gap-2 max-laptop-sl:text-xs px-3 w-full font-bold text-[#818181] dark:text-neutral-300 flex flex-col">
      <div className="flex flex-row items-center justify-between w-full">
        <span>{t("home.sellerCartPoints")}:</span>
        <span className="flex ltr:flex-row-reverse text-amber-400 dark:text-amber-300 justify-center items-center gap-1">
          {props.point} <BoldIcon name="star" size={20} tinted className="text-amber-400 dark:text-amber-300" />
        </span>
      </div>
  
      <div className="flex flex-row items-center justify-between w-full">
        <span>{t("home.sellerCartTypeOfSale")}:</span>
        <span>{props.typeOfSale}</span>
      </div>
  
      <div className="flex flex-row items-center justify-between w-full">
        <span>{t("home.sellerCartStoreLocation")}:</span>
        <span>{props.storeLocation}</span>
      </div>
  
      <div className="flex flex-row items-center justify-between w-full">
        <span>{t("home.sellerCartStoreWorkingHours")}:</span>
        <span>{props.storeWorkingHours}</span>
      </div>
    </div>
  
    <button
      className={`h-9 w-11/12 max-laptop-sl:text-sm max-laptop-sl:h-8 rounded-full font-bold flex justify-center items-center gap-3 cursor-pointer ${
        props.special
          ? "bg-amber-300  hover:bg-amber-400/80 dark:hover:bg-neutral-500 dark:bg-neutral-400  text-white"
          : "bg-cyan-600  hover:bg-sky-400/80  dark:hover:bg-neutral-700 dark:bg-neutral-600 text-white"
      }`}
    >
      {t("home.sellerCartStoreViewTheStore")}
      <BoldIcon name="shop" size={20} tinted className="text-white" />
    </button>
  
    <div className="w-full flex flex-col">
      <div className="w-full h-0.5 bg-neutral-200 dark:bg-neutral-700"></div>
      <div className="flex gap-1 justify-center items-center my-1.5 flex-wrap">
        <IdeaComponent value={"لوازم خانگی"} />
        <IdeaComponent value={"دوچرخه"} />
        <IdeaComponent value={"نفت"} />
        <IdeaComponent value={"گوشی"} />
        <IdeaComponent value={"گلس"} />
        <IdeaComponent value={"گارد"} />
        <IdeaComponent value={"ماشین"} />
      </div>
    </div>
  </div>
  
  );
}
