import { ArrowRight, Check } from "lucide-react";
import React from "react";

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

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

const defaultFeatures = [
  { title: "Instant Implementation", description: "Get access to your blocks the moment you pay." },
  { title: "One-Time Payment", description: "No subscriptions. Just pay once and own it forever." },
  { title: "Developer Friendly", description: "Clean, copy-paste-ready code with full Tailwind + shadcn support." },
  { title: "Fully Responsive", description: "Every block looks perfect on all screen sizes, out of the box." },
  { title: "Production Ready", description: "Battle-tested components you can drop into real projects today." },
];

interface Feature268Props {
  className?: string;
  title?: string;
  description?: string;
  showButtons?: boolean;
  listTitle?: string;
  features?: { title: string; description?: string }[];
  cardTitle?: string;
  cardWelcome?: string;
  cardImage?: string;
  showTryNow?: boolean;
}

const Feature268 = ({
  className,
  title = "Drop-In Ready Blocks to Supercharge Your App",
  description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad",
  showButtons = true,
  listTitle = "ShadcnBlocks Perks",
  features = defaultFeatures,
  cardTitle = "#1 Biggest Shadcn Blocks Collection",
  cardWelcome = "Welcome to SHADCN BLOCKS",
  cardImage,
  showTryNow = true,
}: Feature268Props) => {
  const defaultCardImage = "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/img27.jpeg";
  return (
    <section className={cn("h-full w-full max-w-full overflow-x-hidden overflow-y-hidden py-32", className)}>
      <div className="relative container mx-auto px-4 md:px-6">
        <div className="flex h-full flex-col items-center justify-center gap-10 lg:flex-row lg:justify-center lg:max-w-7xl lg:mx-auto">
        <div className="w-full space-y-5 lg:w-3/5">
          <h2 className="text-heading-2 mt-3 w-full max-w-2xl font-semibold tracking-tight">
            {title}
          </h2>
          <p className="text-body max-w-xl leading-relaxed text-muted-foreground">
            {description}
          </p>
          {showButtons && (
          <div className="mt-10 mb-29 flex flex-wrap gap-4">
            <Button variant="primary">Get Started</Button>
            <Button variant="secondary">Learn More</Button>
          </div>
          )}
          <ul className="space-y-4">
            <li className="mb-3">
              <p className="text-caption font-medium text-muted-foreground">
                {listTitle}
              </p>
            </li>
            {features.map((feature) => (
              <li key={feature.title} className="flex gap-4 lg:items-center">
                <Check className="size-4 shrink-0" />
                <p className="text-body-sm font-normal tracking-tight">
                  {feature.title}
                  {feature.description != null && feature.description !== "" && (
                    <span className="pl-2 opacity-30">{feature.description}</span>
                  )}
                </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 px-5 py-15">
            {cardTitle != null && cardTitle !== "" && (
            <CardItem
              translateZ="60"
              className="text-heading-3 mb-2 max-w-xs text-center font-semibold leading-none tracking-tight"
            >
              {cardTitle}
            </CardItem>
            )}
            {cardWelcome != null && cardWelcome !== "" && (
            <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={cardImage ?? defaultCardImage}
                height="1000"
                width="1000"
                className="h-82 w-full rounded-3xl object-cover group-hover/card:shadow-xl lg:h-60"
                alt="thumbnail"
              />
            </CardItem>

            <div className="flex w-full flex-col items-center justify-center">
              {showTryNow && (
              <CardItem translateZ="100">
                <Button variant="ghost" className="my-5 opacity-50">
                  Try now <ArrowRight />
                </Button>
              </CardItem>
              )}
              <img
                className="w-30"
                src="/images/block/logos/ph-daily.svg"
                alt=""
              />
            </div>
          </CardBody>
        </CardContainer>
        </div>
      </div>
    </section>
  );
};

export { Feature268 };