import ActionArrow from "@/components/ActionArrow";
import Container from "@/components/NAWebsite/Container";
import Link, { LinkProps } from "next/link";
import { SectionDescription, SectionTitle } from "./Section";

function Card({
  title,
  children,
  ...props
}: { title: string } & LinkProps & React.ComponentPropsWithoutRef<"a">) {
  return (
    <Link className="group relative flex flex-col bg-gray-100 p-10" {...props}>
      <div className="flex-auto">
        <h3 className="text-2xl tracking-tight">{title}</h3>
        <SectionDescription>{children}</SectionDescription>
      </div>
      <div className="mt-10 flex items-center justify-end gap-2 text-gray-300 transition-colors group-hover:text-gray-600">
        <span className="text-4xl">
          <ActionArrow />
        </span>
      </div>
    </Link>
  );
}

export default function DiscoverMoreSection() {
  return (
    <div className="my-16 md:my-32">
      <Container>
        <div className="lg:text-center">
          <SectionTitle>Discover more</SectionTitle>
        </div>
        <div className="mt-16 grid gap-1 md:grid-cols-2 xl:grid-cols-4">
          <Card href="#" title="Learn Vector Search">
            Even not know about Vector Search? We have you covered.
          </Card>
          <Card href="#" title="Architecture">
            Discover how TiDB Serverless Vector Search works.
          </Card>
          <Card href="#" title="Examples">
            Bootstrap your next AI app quickly.
          </Card>
          <Card href="#" title="Docs">
            Access tutorials, guides, API references, and much more.
          </Card>
        </div>
      </Container>
    </div>
  );
}