"use client"

import {config} from "@/lib/config"

export const PackageSummary = ({course, discount, setRegister}) => {

    return <>
      <section id="course-hero" className="bg-white rounded-lg shadow-md overflow-hidden p-4 mb-4 mt-3">
        <div className="flex flex-col lg:flex-row gap-4 items-center" style={{fontFamily: "YekanBakhNum"}}>
            <div className="w-full lg:w-8/12">
                <h1 className="hero-title text-2xl lg:text-3xl font-black text-gray-800 mb-4">
                   {course.title}
                </h1>
                <div className="hero-excerpt">
                    <div className="woocommerce-product-details__short-description">
                        <p className="text-right mt-4 text-gray-600">
                            {course.summary}
                        </p>
                    </div>
                </div>

                <div className="flex flex-wrap items-center justify-between mt-4 gap-4">
                    <div className="flex items-center justify-start flex-wrap gap-2.5 w-full">
                        <div onClick={() => setRegister(true)} className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg flex items-center transition duration-200 cursor-pointer">
                            ثبت نام در دوره
                            <svg className="mr-2 mb-1 w-6 h-5" viewBox="0 0 23 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path className="fill-current text-white transition duration-200 group-hover:text-green-700" d="M4.73678 9.95638C10.9561 13.5636 11.7339 13.5637 17.9532 9.95638C24.1726 6.3491 24.1726 6.3491 17.9532 2.74183C11.7339 -0.865436 10.9561 -0.865446 4.73678 2.74183C1.62711 4.54547 0.0722656 5.44729 0.0722656 6.34911V14.4655C0.0722656 14.9635 0.476023 15.3673 0.974084 15.3673C1.47214 15.3673 1.8759 14.9635 1.8759 14.4655L1.8759 8.57971C1.8759 8.43679 2.03439 8.35027 2.15544 8.42626C2.84479 8.85901 3.70524 9.35808 4.73678 9.95638Z" />
                                <path className="fill-current text-white transition duration-200 group-hover:text-green-700" d="M4.73678 10.8583C10.9561 14.4655 11.7339 14.4655 17.9532 10.8583L18.308 10.6524C18.5895 10.489 18.9445 10.6682 18.9652 10.9931C18.9965 11.4841 19.0104 12.0377 19.0104 12.6618C19.0104 17.1709 17.2068 18.0728 11.314 18.0728C5.02702 18.0728 3.67954 17.1709 3.67954 12.6618C3.67954 12.038 3.69291 11.4846 3.72307 10.9938C3.74307 10.6682 4.09864 10.4879 4.38077 10.6517L4.73678 10.8583Z" />
                            </svg>
                        </div>
                        
                        {discount > 0 && 
                            <div className="text-orange-600"> 
                                <span className="bg-orange-600 rounded-sm text-white font-semibold mx-1 px-1 align-baseline "> % {discount}</span>
                                 تخفیف فروش ویژه
                            </div>
                        } 
                        
                        <div className="hero-price mr-auto text-2xl font-bold text-gray-800">
                            <div className="text-left">
                                {
                                    course.price < course.main_price && <>
                                        <span className="text-gray-400 text-base line-through">{Number(course.main_price).toLocaleString()}</span>
                                        <span className="text-gray-400 text-base line-through mx-1 invisible">تومان</span>
                                    </>
                                }
                            </div>
                            <span className="font-black">{Number(course.price).toLocaleString()}</span>
                            <span className="text-gray-600 text-base mx-1">تومان</span>
                        </div>
                    </div>
                </div>
            </div>
            <div className="w-full lg:w-4/12">
                <figure className="course-thumb">
                    <img
                        fetchPriority="high"
                        width="1536"
                        height="1024"
                        src={`${config.host()}/media/packages/${course.thumbnail}`}
                        alt={course.title}
                        loading="eager"
                        decoding="async"
                        // srcset="https://hermeslearn.com/wp-content/uploads/ICDL-10.webp 1536w, https://hermeslearn.com/wp-content/uploads/ICDL-10-768x512.webp 768w"
                        srcSet={`${config.host()}/media/packages/${course.thumbnail} 1536w, ${config.host()}/media/packages/${course.thumbnail} 768w`}
                        sizes="(max-width: 1536px) 100vw, 1536px"
                        className="w-full h-auto rounded-lg shadow-lg "
                    />
                </figure>
            </div>
        </div>
        <hr className="my-3 border-gray-200" />
        <div className="hero-bottom flex flex-wrap items-center justify-between gap-4">
            <div className="hero-share flex items-center flex-wrap gap-3">
                <span className="text-gray-600">اشتراک گذاری:</span>
                <a target="_blank" rel="nofollow noopener" href="https://twitter.com/intent/tweet?url=https%3A%2F%daramadasan.com%2Fcourses%2F%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-%25d9%2585%25d8%25ac%25d8%25a7%25d8%25b2%25db%258c-%25d9%2585%25d9%2587%25d8%25a7%25d8%25b1%25d8%25aa-%25d9%2587%25d8%25a7%25db%258c-7-%25da%25af%25d8%25a7%25d9%2586%25d9%2587-icdl%2F&text=%D8%AF%D9%88%D8%B1%D9%87%20%D8%A2%D9%86%D9%84%D8%A7%DB%8C%D9%86%20ICDL%20%D8%B4%D8%A7%D9%85%D9%84%20%D8%A2%D9%85%D9%88%D8%B2%D8%B4%20%D9%85%D9%87%D8%A7%D8%B1%D8%AA%20%D9%87%D9%81%D8%AA%E2%80%8C%DA%AF%D8%A7%D9%86%D9%87%20%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1">
                    <svg className="w-5 h-5 text-gray-500" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M24 2.309C23.117 2.701 22.168 2.965 21.172 3.084C22.189 2.475 22.97 1.51 23.337 0.36C22.386 0.924 21.332 1.334 20.21 1.555C19.313 0.598 18.032 0 16.616 0C13.437 0 11.101 2.966 11.819 6.045C7.728 5.84 4.1 3.88 1.671 0.901C0.381 3.114 1.002 6.009 3.194 7.475C2.388 7.449 1.628 7.228 0.965 6.859C0.911 9.14 2.546 11.274 4.914 11.749C4.221 11.937 3.462 11.981 2.69 11.833C3.316 13.789 5.134 15.212 7.29 15.252C5.22 16.875 2.612 17.6 0 17.292C2.179 18.689 4.768 19.504 7.548 19.504C16.69 19.504 21.855 11.783 21.543 4.858C22.505 4.163 23.34 3.296 24 2.309Z " fill="#98A3B8" />
                    </svg>
                </a>
                <a target="_blank" rel="nofollow noopener" href="https://t.me/share/url?url=https%3A%2F%daramadasan.com%2Fcourses%2F%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-%25d9%2585%25d8%25ac%25d8%25a7%25d8%25b2%25db%258c-%25d9%2585%25d9%2587%25d8%25a7%25d8%25b1%25d8%25aa-%25d9%2587%25d8%25a7%25db%258c-7-%25da%25af%25d8%25a7%25d9%2586%25d9%2587-icdl%2F&text=%D8%AF%D9%88%D8%B1%D9%87%20%D8%A2%D9%86%D9%84%D8%A7%DB%8C%D9%86%20ICDL%20%D8%B4%D8%A7%D9%85%D9%84%20%D8%A2%D9%85%D9%88%D8%B2%D8%B8%20%D9%85%D9%87%D8%A7%D8%B1%D8%AA%20%D9%87%D9%81%D8%AA%E2%80%8C%DA%AF%D8%A7%D9%86%D9%87%20%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1">
                    <svg className="w-5 h-5 text-gray-500" viewBox="0 0 24 24" aria-hidden="true">
                    <path fillRule="evenodd" clipRule="evenodd" d="M18.3844 19.779C18.7064 20.007 19.1214 20.064 19.4914 19.924C19.8614 19.783 20.1334 19.467 20.2154 19.084C21.0844 15 23.1924 4.66303 23.9834 0.948026C24.0434 0.668026 23.9434 0.377026 23.7234 0.190026C23.5034 0.00302622 23.1984 -0.0509739 22.9264 0.0500261C18.7334 1.60203 5.8204 6.44703 0.542398 8.40003C0.207398 8.52402 -0.0106021 8.84603 0.000397854 9.19903C0.0123979 9.55303 0.250398 9.86003 0.593398 9.96303C2.9604 10.671 6.0674 11.656 6.0674 11.656C6.0674 11.656 7.5194 16.041 8.2764 18.271C8.3714 18.551 8.5904 18.771 8.8794 18.847C9.1674 18.922 9.4754 18.843 9.6904 18.64C10.9064 17.492 12.7864 15.717 12.7864 15.717C12.7864 15.717 16.3584 18.336 18.3844 19.779ZM7.3744 11.102L9.0534 16.64L9.4264 13.133C9.4264 13.133 15.9134 7.28203 19.6114 3.94703C19.7194 3.84903 19.7344 3.68503 19.6444 3.57003C19.5554 3.45503 19.3914 3.42803 19.2684 3.50603C14.9824 6.24303 7.3744 11.102 7.3744 11.102Z" fill="#98A3B8" />
                    </svg>
                </a>
            </div>

            <div className="flex items-center gap-2.5">
                <button type="button" className="flex items-center gap-1 p-2 rounded-lg hover:bg-gray-100">
                    <svg className="w-5 h-5 text-gray-600" viewBox="0 0 24 24" aria-hidden="true">
                    <path className="fill-current" d="M10.3257 0.986572C10.3265 0.970374 10.327 0.95412 10.327 0.93775C10.327 0.419824 9.9071 0 9.38923 0C8.87136 0 8.45148 0.419824 8.45148 0.93775C8.45148 0.95412 8.45194 0.970432 8.45274 0.986629C5.31347 1.43908 2.35954 4.96961 2.82498 8.90863C3.06605 10.114 2.30699 10.7526 1.51691 11.4173C0.77033 12.0454 -0.00384056 12.6968 0.0119565 13.8716C0.0119565 15.5183 0.949478 16.4106 2.32634 16.8532C2.32634 16.8532 4.84803 17.8173 9.38934 17.8173C13.9307 17.8173 16.4523 16.8532 16.4523 16.8532C17.8292 16.4106 18.767 15.4729 18.7667 13.8716C18.7666 12.6866 17.9929 12.035 17.2504 11.4098C16.4639 10.7474 15.7125 10.1147 15.9537 8.90863C16.4191 4.96949 13.4651 1.43891 10.3257 0.986572Z" />
                    <path className="fill-current" d="M6.03899 18.9426C5.62461 19.2533 5.5407 19.841 5.85137 20.2554C7.63312 22.6311 11.1966 22.6311 12.9784 20.2554C13.289 19.841 13.2051 19.2533 12.7907 18.9426C12.3765 18.6318 11.7887 18.7158 11.4779 19.1301C10.4464 20.5054 8.38337 20.5054 7.35187 19.1301C7.04108 18.7158 6.45327 18.6318 6.03899 18.9426Z" />
                    </svg>
                    <span className="text-sm text-gray-600">4</span>
                </button>
                <a href="#course-reviews" className="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100">
                    <svg className="w-5 h-5 text-gray-600" viewBox="0 0 24 24" aria-hidden="true">
                    <path fillRule="evenodd" clipRule="evenodd" d="M11.6397 0C20.9066 0 22.8927 1.66715 22.8927 10.0027C22.8927 15.4208 21.9552 18.755 17.7353 18.755C15.4802 18.755 14.8094 19.8263 14.1847 20.8238C13.6405 21.6929 13.1313 22.506 11.6399 22.506C10.1487 22.506 9.63949 21.6929 9.09526 20.8238C8.47058 19.8263 7.79973 18.755 5.54457 18.755C1.3247 18.755 0.386719 15.3142 0.386719 10.0027C0.386719 1.76547 2.37287 0 11.6397 0ZM12.5775 7.502C12.5775 6.9841 12.9973 6.56425 13.5152 6.56425H16.3285C16.8464 6.56425 17.2662 6.9841 17.2662 7.502C17.2662 8.01991 16.8464 8.43975 16.3285 8.43975H13.5152C12.9973 8.43975 12.5775 8.01991 12.5775 7.502ZM6.95097 10.3153C6.43306 10.3153 6.01322 10.7351 6.01322 11.253C6.01322 11.7709 6.43306 12.1908 6.95097 12.1908H16.3285C16.8464 12.1908 17.2662 11.7709 17.2662 11.253C17.2662 10.7351 16.8464 10.3153 16.3285 10.3153H6.95097Z" />
                    </svg>
                    <span className="text-sm text-gray-600">79</span>
                </a>
                <button type="button" className="flex items-center gap-1 p-2 rounded-lg hover:bg-gray-100">
                    <svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 13 11" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path stroke="currentColor" d="M3.95035 1.229C4.81955 1.229 5.61243 1.66166 6.21284 2.15457C6.81326 1.66166 7.60614 1.229 8.47534 1.229C10.3497 1.229 11.8691 2.62275 11.8691 4.34192C11.8691 7.80824 7.92382 9.82702 6.62321 10.3984C6.36123 10.5134 6.06445 10.5134 5.80248 10.3984C4.50187 9.827 0.556602 7.80816 0.556602 4.34184C0.556602 2.62267 2.07603 1.229 3.95035 1.229Z" strokeWidth="0.761705" />
                    </svg>
                    <span className="text-sm text-gray-600">14</span>
                </button>
            </div>
        </div>
      </section>
    </>
}

// https://hermeslearn.com/courses/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%85%d8%ac%d8%a7%d8%b2%db%8c-%d9%85%d9%87%d8%a7%d8%b1%d8%aa-%d9%87%d8%a7%db%8c-7-%da%af%d8%a7%d9%86%d9%87-icdl/
// https://maktabkhooneh.org/course/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%85%D8%A8%D8%A7%D9%86%DB%8C-%D9%87%D9%88%D8%B4-%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C-%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C-%D9%85%D8%A7%D8%B4%DB%8C%D9%86-mk3585/
// https://www.daneshjooyar.com/gold-front/
// https://startabad.com/Allcourses/diamond-artificial-intelligence/
// https://inverseschool.com/course/data-visualization
// https://sematec-co.com/course/ai-course/