import Button from "@/app/components/Button";
import banner from "@/assets/images/banner.png";
import { ArrowCircleLeft } from "iconsax-reactjs";
import Image from "next/image";
import { FC } from "react";

const BannerSection: FC = () => {
  return (
    <div className="w-full">
      <div className="relative">
        <Image src={banner} alt="banner" width={2000} height={574} className="w-full max-h-[574px] object-cover" />
        <div className="absolute h-full right-[120px] top-0 bottom-0 m-auto flex flex-col justify-center">
          <div className="text-base">چاپ و بسته بندی به روش هوشمندانه</div>
          <div className="text-2xl font-black mt-4">مجــتمع تخصصــــــی</div>
          <div className="text-2xl font-black mt-4">
            چــــــاپ و بستــــه بندی <span className="text-primary">دستی</span> و <span className="text-primary">هوشمند</span>{" "}
          </div>
          <div className="mt-4 text-base flex flex-col gap-3">
            <div>قیمت‌های عالی</div>
            <div>خدمات مشتریان بی‌نظیر</div>
            <div>سیستم سفارش‌گیری ساده</div>
          </div>

          <div className="mt-4 flex gap-6 items-center">
            <Button>
              <div className="flex gap-2.5">
                <div>محصولات</div>
                <ArrowCircleLeft size={24} color="white" />
              </div>
            </Button>
            <Button variant="outline" className="min-w-16">
              <div className="flex gap-2.5">
                <div>درباره ی ما</div>
              </div>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BannerSection;