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
											alt={`Annuncio image - ${annuncio.codice}`}
											className="block w-[240px] rounded-[4px] object-cover object-center"
											height="140px"
											src={`${process.env.NEXT_PUBLIC_BASE_URL}/go-api/images/get/${annuncio.immagine}`}
											width="100%"
										/>
									</Row>
									<Row className="block w-full ">
										<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
											className="block text-[14px] font-semibold text-indigo-600 no-underline"
											href={`${process.env.NEXT_PUBLIC_BASE_URL}/annuncio/${annuncio.codice}`}
										>
											Scheda dell&apos;annuncio →
										</Link>
									</Row>
								</Section>
							</>
						))}
					</Section>
				</Section>
			</>
		</Base>
	);
};

export default OnboardingServizio;