import { Section } from "@wp2/ui/dist/section";
import { tinaField } from "tinacms/dist/react";
import React from "react";
import { useLocalize } from "@wp2/helpers/dist/client";
import { createBlock } from "../create";
import { Button } from "@wp2/ui/dist/button";
import { Text } from "@wp2/ui/dist/text";
export const Quote = createBlock(({ data }) => {
    const localize = useLocalize();
    return (<Section id="quote" className="text-center flex flex-col items-center">
      <div className="bg-primary absolute w-full left-0 h-full"/>
      <div className="flex flex-col gap-6 py-24 relative text-background items-center">
        <Text variant={data.subtitle?.variant} data-tina-field={tinaField(data, "title")}>
          {localize(data.title?.text)
            ?.split(".")
            .filter((l) => l)
            .map((line, i) => (<React.Fragment key={i}>
                {line}.<br />
              </React.Fragment>))}
        </Text>
        <Text data-tina-field={tinaField(data, "subtitle")} variant={data.subtitle?.variant}>
          {localize(data.subtitle?.text)}
        </Text>
        <Button href={data.button?.url} data-tina-field={tinaField(data, "button")} variant={data.button?.variant}>
          {localize(data.button?.label)}
        </Button>
      </div>
    </Section>);
});