import {
  Button,
  Heading,
  Img,
  Link,
  Row,
  Section,
  Text,
} from "@react-email/components";
import Base from "./base";
export type OnboardingServizio_NewMail = {
  mailType: "onboardingServizio";
  props: OnboardingServizioProps;
};

type OnboardingServizioProps = {
  token: string;
  nome: string;
  annunci?: {
    titolo: string | null;
    immagine: string | null;
    codice: string;
    prezzo: number;
  }[];
};

const OnboardingServizio = ({
  token,
  nome,
  annunci,
}: OnboardingServizioProps) => {
  return (
    <Base preview="Procedi ora su Infoalloggi.it">
      <>
        <Heading className="text-center text-3xl leading-8">
          Procedi ora su Infoalloggi.it
        </Heading>
        <Section className="px-5 text-left text-base md:px-12">
          <Row>
            <Text>
              Ciao {nome},<br />
              Accedi ora al servizio di ricerca Infoalloggi, dove potrai andare
              a contattare direttamente i proprietari degli immobili
              disponibili.
            </Text>
          </Row>
          <Section className="mb-5">
            <Button
              className="mx-auto box-border inline-flex h-10 items-center justify-center rounded-md bg-neutral-100 px-4 py-2 text-center align-middle font-semibold whitespace-nowrap text-neutral-900"
              href={`${process.env.NEXT_PUBLIC_BASE_URL}/servizio/pre-onboard/${token}`}
            >
              Vai al servizio
            </Button>
          </Section>
          <Section>
            {annunci?.map((annuncio, index) => (
              <>
                <Text className="font-semibold">
                  Annunci selezionati per te:
                </Text>
                <Section className="mb-[30px]" key={index}>
                  <Row className="mb-[12px]">
                    <Img
                      src={`${process.env.NEXT_PUBLIC_BASE_URL}/go-api/images/get/${annuncio.immagine}`}
                      width="100%"
                      height="140px"
                      alt={`Annuncio image - ${annuncio.codice}`}
                      className="block w-[240px] rounded-[4px] object-cover object-center"
                    />
                  </Row>
                  <Row className="block w-full sm:hidden">
                    <div className="mb-[5px] flex h-[24px] w-fit items-center justify-center gap-1 rounded-full bg-indigo-600 px-2 text-[12px] leading-none font-semibold text-white">
                      <strong>Codice: </strong> {annuncio.codice}
                    </div>
                    <Heading
                      as="h2"
                      className="mt-0 mb-[6px] text-[16px] leading-none font-bold"
                    >
                      {annuncio.titolo || "N/A"}
                    </Heading>
                    <Text className="m-0 text-[14px] leading-[24px] text-gray-500">
                      <strong>Prezzo:</strong> €
                      {(annuncio.prezzo / 1e2).toFixed(2)}
                    </Text>
                    <Link
                      href={`${process.env.NEXT_PUBLIC_BASE_URL}/annuncio/${annuncio.codice}`}
                      className="block text-[14px] font-semibold text-indigo-600 no-underline"
                    >
                      Scheda dell&apos;annuncio →
                    </Link>
                  </Row>
                </Section>
              </>
            ))}
          </Section>
        </Section>
      </>
    </Base>
  );
};

export default OnboardingServizio;
