import React from "react";
import { View } from "react-native"; // Update import statement
import { Props } from "./MemberShipCard.types";
import { styles } from "./MemberShipCard.styles";
// import MemberCard from "../../assets/ReactSVG/MemberCard";

import {
  Svg,
  Rect,
  Path,
  G,
  Text,
  Defs,
  RadialGradient,
  Stop,
  Ellipse,
  Mask,
} from "react-native-svg";
export default function MemberShipCard(Props: Props) {
  return (
    <Svg width={375} height={267}>
      {/* Background */}
      <Rect width={375} height={267} rx={10} fill="#2E0E4E" />

      <G x={30} y={30}>
        <Svg width={32} height={32}>
          <Path
            fill="#fff"
            d="M31.88.493v10.333L21.549 21.16V10.826H11.213v6.823a3.51 3.51 0 0 0 3.511 3.51h6.822L11.214 31.494C5.507 31.493.881 26.867.881 21.16V.493h31ZM31.88 21.16H21.549v10.333H31.88V21.16Z"
          />
        </Svg>
      </G>

      <Text
        x={Props.questTitleX ? Props.questTitleX : "325"}
        y={Props.questTitleY ? Props.questTitleY : "50"}
        fontSize="25"
        fill="#fff"
        textAnchor="end"
      >
        {Props.questTitle ? Props.questTitle : "Quest"}
      </Text>

      <Text
        x={Props.questYearX ? Props.questYearX : "325"}
        y={Props.questYearY ? Props.questYearY : "65"}
        fontSize="10"
        fill="#fff"
        textAnchor="end"
      >
        {Props.questYear ? Props.questYear : "2023"}
      </Text>

      <Text
        x={Props.wellcomeTitleX ? Props.wellcomeTitleX : "180"}
        y={Props.wellcomeDetailsY ? Props.wellcomeDetailsY : "130"}
        fontSize="20"
        fill="#fff"
        textAnchor="end"
      >
        {Props.wellcomeTitle ? Props.wellcomeTitle : "Welcome to club"}
      </Text>

      <Text
        x={Props.wellcomeDetailsX ? Props.wellcomeDetailsX : "240"}
        y={Props.wellcomeDetailsY ? Props.wellcomeDetailsY : "160"}
        fontSize="15"
        fill="#fff"
        textAnchor="end"
      >
        {Props.wellcomeDetails
          ? Props.wellcomeDetails
          : " Let’s start the new fun journey!"}
      </Text>

      <Text x="105" y="200" fontSize="15" fill="#fff" textAnchor="end">
        EXP DATE
      </Text>

      <Text
        x={Props.expX ? Props.expX : "75"}
        y={Props.expY ? Props.expY : "220"}
        fontSize="15"
        fill="#fff"
        textAnchor="end"
      >
        {Props.expMonth && Props.expYear
          ? `${Props.expMonth} / ${Props.expYear}`
          : "12/25"}
      </Text>
    </Svg>
  );
}