import { Section } from "@wp2/ui/dist/section";
import { useLocalize } from "@wp2/helpers/dist/client";
import { createBlock } from "../create";
import { cn } from "@wp2/helpers";
import { tinaField } from "tinacms/dist/react";
import { Image } from "@wp2/ui/dist/image";
import { Text } from "@wp2/ui/dist/text";
export const TextAndImage = createBlock(({ data }) => {
    const localize = useLocalize();
    return (<Section id="text-and-image" className="grid gap-3 md:grid-cols-3 py-20 ">
      <div className={cn(data.imageOnLeft ? "order-first" : "order-last", "items-center")}>
        <Image alt="Image" width={500} height={500} data-tina-field={tinaField(data, "image")} src={data.image} className="aspect-square w-full"/>
      </div>
      <div className="justify-center h-full flex flex-col gap-3 col-span-2">
        <Text variant={data.title?.variant} data-tina-field={tinaField(data, "title")}>
          {localize(data.title?.text)}
        </Text>
        <Text variant={data.description?.variant} data-tina-field={tinaField(data, "description")}>
          {localize(data.description?.text)}
        </Text>
      </div>
    </Section>);
});