import React from 'react'
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import { TiStar } from 'react-icons/ti';
import { useTranslations } from 'next-intl';
import { formatNumber } from '@/utils/helpers';
import { VerifiedIcon } from '@/assets/svgs/Icons';
const MerchantDetails = ({trader}:{trader:any}) => {
    const t = useTranslations();
  return (
    <div className="flex items-start gap-2 md:gap-4 py-10 w-full container">
        <ImageWithFallback
            src={trader?.logo}
            alt={trader?.company_name}
            width={200}
            height={200}
            className="rounded-full p-1.5 size-20 object-contain bg-greynormal"
        />
        <div className="flex flex-col gap-1.5 md:gap-3">
            {/* {trader?.verify && ( */}
                <div className={`text-xs p-2 w-fit rounded-full pe-5 font-normal leading-4 text-start bg-secprimary text-primary`}>
                    <span className="flex items-center gap-1">
                    <VerifiedIcon className="lg:size-5"/>
                    {t(`Text.verified`)}
                    </span>
                </div>
            {/* // )} */}
            <h2 className="text-lg md:text-3xl font-semibold ">
                {trader?.company_name}
            </h2>
            <div className="flex items-center gap-1.5 md:gap-4">
                <div className="bg-[#FFB01D14] text-[#FFB01D] p-1.5 rounded-full text-sm sm:text-base font-semibold flex gap-1 items-center">
                    {formatNumber(trader?.rate)}
                    <TiStar size={25} />
                </div>
                <span className="text-sm font-semibold text-secondrytext">
                    {t("Text.joinDate")}:
                    <span className='text-[#583614]'> {trader?.created_at}</span>  
                </span>
            </div>
            {/* <div className='flex items-center flex-wrap gap-2'>
                <h3 className='font-semibold text-secondrytext'>{t("form.category")} :</h3>
                <div className="flex-center-content gap-2">
                    <span className='p-2 rounded-xl text-secondrytext bg-greynormal'>إلكترونيات</span>
                    <span className='p-2 rounded-xl text-secondrytext bg-greynormal'>الكهربائيات</span>
                </div>
            </div> */}
        </div>
  </div>
  )
}

export default MerchantDetails