import { BadgeCheck } from "lucide-react";
import React from "react";

import { cn } from "@/lib/utils";

import {
  CardBody,
  CardContainer,
  CardItem,
} from "@/components/aceternity/3d-card";

interface Feature269Props {
  className?: string;
}

const Feature269 = ({ className }: Feature269Props) => {
  const features = [
    "Instant Implementation",
    "One-Time Payment",
    "Developer Friendly",
    "Fully Responsive",
    "Production Ready",
    "Premium Support",
    "Regular Updates",
    "Customizable Design",
    "Performance Optimized",
    "Accessibility Compliant",
    "Cross-Browser ",
    "Documentation Included",
  ];

  return (
    <section className={cn("relative w-full overflow-hidden py-32", className)}>
      <div className="container mx-auto px-4 md:px-6">
        <div className="relative flex h-full flex-col items-start justify-between gap-10 lg:flex-row">
          <div className="w-full space-y-5 lg:w-3/5">
            <h2 className="text-heading-2 mx-auto mb-15 w-full max-w-lg text-center font-semibold tracking-tight lg:mx-0 lg:text-left">
              Why Choose Shadcn Blocks?
            </h2>
            <div className="mb-18 flex items-center gap-4 px-5 lg:max-w-md">
              <span className="h-px w-full bg-muted-foreground/20" />
              <p className="text-caption font-medium text-muted-foreground/50">FEATURES</p>
              <span className="h-px w-full bg-muted-foreground/20" />
            </div>
            <ul className="grid grid-cols-2 gap-3 lg:max-w-md">
              {features.map((feature) => (
                <li key={feature} className="flex gap-2 lg:items-center">
                  <BadgeCheck className="size-4 text-muted-foreground/80" />
                  <p className="text-body-sm tracking-tight text-muted-foreground/80">
                    {feature}
                  </p>
                </li>
              ))}
            </ul>
          </div>
          <CardContainer
            className="w-full"
            containerClassName="h-full w-full p-0 m-0 lg:w-2/5"
          >
            <CardBody className="group/card flex h-full !w-full flex-col items-center justify-center rounded-3xl bg-muted/70 p-5">
              <CardItem
                translateZ="60"
                className="text-heading-3 mt-10 mb-2 max-w-xs text-center font-semibold leading-none tracking-tight"
              >
                #1 Biggest Shadcn Blocks Collection
              </CardItem>
              <CardItem
                as="p"
                translateZ="25"
                className="text-body-sm my-4 flex w-full max-w-sm items-center justify-center font-medium tracking-tight"
              >
                <span className="mr-2 opacity-50">Welcome to</span>
                <span className="font-semibold">SHADCN BLOCKS</span>
              </CardItem>
              <CardItem translateZ="60" className="mt-4 w-full max-w-[1000px]">
                <img
                  src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/img7.jpeg"
                  height="1000"
                  width="1000"
                  className="h-70 w-full rounded-3xl object-cover group-hover/card:shadow-xl"
                  alt="thumbnail"
                />
              </CardItem>
            </CardBody>
          </CardContainer>
        </div>
      </div>
    </section>
  );
};

export { Feature269 };