import { AtomCardContainer } from "native/atoms/CardContainer";
import { AtomImage } from "native/atoms/Image";
import { AtomLink } from "native/atoms/Link";
import { AtomHeadline } from "native/atoms/Typography/Headline";
import { AtomTruncate } from "native/atoms/Typography/Truncate";
import React from "react";
import { IPromoQRProps } from "./index.interfaces";
import { BoxTitle, CardBody } from "./styles";

export const OrganismPromoQR = ({
  title,
  data,
  textLink,
  urlLink,
  width = "396px",
  height = "414px",
  children,
}: IPromoQRProps) => {
  return (
    <AtomCardContainer
      managePadding="10px"
      height={height}
      width={width}
      shadowSize="large"
    >
      <CardBody>
        {children}
        <BoxTitle>
          <AtomTruncate
            numberOfLineTruncate={2}
            text={title}
            size="medium"
            align="center"
            weight="regular"
            styles={{ width: "100%" }}
            color="neutral600"
          />
        </BoxTitle>
        <AtomImage
          alt={`Promo QR Code ${data.code}`}
          src={data.image}
          imgWidth="60%"
          imgHeight="60%"
        />
        <AtomHeadline
          styles={{ marginTop: "0px", marginBottom: "10px" }}
          text={`[ ${data.code.split("").join(" ")} ]`}
          size="medium"
          align="center"
          weight="regular"
          color="neutral600"
        />
        <AtomLink
          text={textLink}
          typeIcon="Right"
          url={urlLink}
          color="primary"
          nameIconRight="pin"
        />
      </CardBody>
    </AtomCardContainer>
  );
};
