import type { Dictionary } from "@/app/[lang]/dictionaries";
import {
  CardContent,
  CardDescription,
  CardSkeleton,
} from "@/components/sections/features/shared";
import { Container } from "@/components/ui/container";
import { HumanIcon, IntegrationIcon, WorkflowIcon } from "@/icons";

import { SkeletonOne } from "./skeletons/first";
import { SkeletonTwo } from "./skeletons/second";

export const FeaturesSecondary = ({
  dict,
}: {
  dict: Dictionary["multisource"];
}) => {
  return (
    <section
      id="product"
      className="relative overflow-hidden pt-10 md:pt-20 lg:py-32"
    >
      <Container>
        <div className="border-hairline divide-hairline grid grid-cols-1 divide-y border-y md:grid-cols-2 md:divide-x md:divide-y-0">
          <div>
            <CardContent>
              <h2 className="text-center text-lg font-bold text-neutral-800 dark:text-neutral-200">
                {dict.card_source_title}
              </h2>
              <CardDescription>{dict.card_source_description}</CardDescription>
            </CardContent>
            <CardSkeleton>
              <SkeletonOne />
            </CardSkeleton>
          </div>
          <div>
            <CardContent>
              <h2 className="text-lg font-bold text-neutral-800 dark:text-neutral-200">
                {dict.card_gsc_title}
              </h2>
              <CardDescription>{dict.card_gsc_description}</CardDescription>
            </CardContent>
            <CardSkeleton className="mask-t-from-50% mask-radial-from-50%">
              <SkeletonTwo />
            </CardSkeleton>
          </div>
        </div>

        <div className="mt-10 grid grid-cols-1 gap-10 text-center md:mt-20 md:grid-cols-3">
          <div>
            <div className="flex items-center gap-2">
              <WorkflowIcon />
              <h3 className="text-lg font-bold text-neutral-600 dark:text-neutral-400">
                {dict.items[0].title}
              </h3>
            </div>

            <p className="text-ink-3 mt-2 text-base">
              {dict.items[0].description}
            </p>
          </div>
          <div>
            <div className="flex items-center gap-2">
              <IntegrationIcon />
              <h3 className="text-lg font-bold text-neutral-600 dark:text-neutral-400">
                {dict.items[1].title}
              </h3>
            </div>

            <p className="text-ink-3 mt-2 text-base">
              {dict.items[1].description}
            </p>
          </div>
          <div>
            <div className="flex items-center gap-2">
              <HumanIcon />
              <h3 className="text-lg font-bold text-neutral-600 dark:text-neutral-400">
                {dict.items[2].title}
              </h3>
            </div>

            <p className="text-ink-3 mt-2 text-base">
              {dict.items[2].description}
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
};