import { Section } from "@wp2/ui/dist/section";
import { createBlock } from "../create";
import { useLocalize } from "@wp2/helpers/dist/client";
import { tinaField } from "tinacms/dist/react";
import { ArrowRight } from "lucide-react";
import { Button } from "@wp2/ui/dist/button";
import { Image } from "@wp2/ui/dist/image";
import { Text } from "@wp2/ui/dist/text";
export const Stairs = createBlock(({ data }) => {
    const localize = useLocalize();
    return (<Section id="stairs" className="py-20 gap-10">
      <Text variant={data.title?.variant} data-tina-field={tinaField(data, "title")}>
        {localize(data.title?.text)}
      </Text>
      <Text variant={data.subtitle?.variant} data-tina-field={tinaField(data, "subtitle")} className="w-full font-light flex flex-col gap-3 border-l-4 border-primary pl-5">
        {localize(data.subtitle?.variant)}
      </Text>
      <div className="grid md:grid-cols-3 gap-6 md:gap-4">
        {data.items?.map((item, i) => item ? (<div key={i} className="flex flex-col gap-3">
              <Image height={330} width={440} className="aspect-[16/12] object-cover" src={item?.image || undefined} alt={localize(item?.title)} data-tina-field={tinaField(item, "image")}/>
              <Text variant={data.textVariant} data-tina-field={tinaField(item, "title")}>
                {localize(item?.title)}
              </Text>
              <Text variant={data.descriptionVariant} data-tina-field={tinaField(item, "description")}>
                {localize(item?.description)}
              </Text>
              <Button data-tina-field={tinaField(item, "href")} href={item?.href} variant={data.button?.variant} className="gap-2 px-0">
                <span>{localize(data?.button?.label)}</span>
                <ArrowRight className="h-4 w-4"/>
              </Button>
            </div>) : null)}
      </div>
    </Section>);
});