"use client";
import { useIsMobile } from "@/hooks/checkScreenSize";
import HorizontalCutCornerBordered from "../global/HorizontalCutCornerBordered";
import Title from "../global/Title";
import VerticalCutCornerBordered from "../global/VerticalCutCornerBordered";
import OutLineText from "../atoms/OutLineText";

function Statistics() {
  const isMobile = useIsMobile();
  if (isMobile === null) return null;
  return (
    <div className="flex flex-col lg:flex-row lg:items-start">
      <div className="relative">
        <VerticalCutCornerBordered
          width={isMobile ? "80%" : 295}
          height={171}
          className="rotate-180 mr-auto lg:rotate-0"
        />

        <div className=" absolute inset-0 flex flex-col gap-1 justify-center items-center text-center lg:items-start lg:text-right lg:pr-6">
          <h3 className="font-black text-6xl text-secondary">300 +</h3>
          <OutLineText>Projects</OutLineText>
          <Title Component="p" className="text-primary-foreground text-lg">
            داستان‌هایی که به نتیجه رسیده‌اند
          </Title>
        </div>
      </div>
      <div className="relative -mt-0.5">
        <HorizontalCutCornerBordered
          width={310}
          height={200}
          className="hidden lg:rotate-180 lg:block"
        />

        <VerticalCutCornerBordered
          width={isMobile ? "20%" : 295}
          height={171}
          className="lg:hidden"
        />

        <div className="absolute inset-0 flex flex-col gap-1 justify-center items-center text-center lg:items-start lg:text-right lg:pr-10">
          <h3 className="font-black text-6xl text-secondary">150 +</h3>
          <OutLineText>Companies</OutLineText>
          <Title Component="p" className="text-primary-foreground text-lg">
            همکاری‌هایی که فراتر از پروژه بودند
          </Title>
        </div>
      </div>
    </div>
  );
}

export default Statistics;
