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

import { SkeletonOne } from "./skeletons/first";
import { SkeletonFour } from "./skeletons/four";
import { SkeletonTwo } from "./skeletons/second";
import { SkeletonThree } from "./skeletons/third";

export const FeaturesTertiary = ({ dict }: { dict: Dictionary["team"] }) => {
  return (
    <section className="relative overflow-hidden pt-10 md:pt-20 lg:py-32">
      <Container>
        <div className="border-hairline divide-hairline grid grid-cols-1 border-y md:grid-cols-2">
          <div className="border-hairline border-b md:border-r">
            <CardContent>
              <h2 className="text-lg font-bold text-neutral-800 dark:text-neutral-200">
                {dict.items[0].title}
              </h2>
              <CardDescription>{dict.items[0].description}</CardDescription>
            </CardContent>
            <CardSkeleton>
              <SkeletonOne />
            </CardSkeleton>
          </div>
          <div className="border-hairline border-b">
            <CardContent>
              <h2 className="text-lg font-bold text-neutral-800 dark:text-neutral-200">
                {dict.items[1].title}
              </h2>
              <CardDescription>{dict.items[1].description}</CardDescription>
            </CardContent>
            <CardSkeleton className="mask-radial-from-20%">
              <SkeletonTwo />
            </CardSkeleton>
          </div>
          <div className="border-hairline md:border-r">
            <CardContent>
              <h2 className="text-lg font-bold text-neutral-800 dark:text-neutral-200">
                {dict.items[2].title}
              </h2>
              <CardDescription>{dict.items[2].description}</CardDescription>
            </CardContent>
            <CardSkeleton className="mask-r-from-50% mask-radial-from-20%">
              <SkeletonThree />
            </CardSkeleton>
          </div>
          <div>
            <CardContent>
              <h2 className="text-lg font-bold text-neutral-800 dark:text-neutral-200">
                {dict.items[3].title}
              </h2>
              <CardDescription>{dict.items[3].description}</CardDescription>
            </CardContent>
            <CardSkeleton className="">
              <SkeletonFour />
            </CardSkeleton>
          </div>
        </div>
      </Container>
    </section>
  );
};