import { Badge, Flex, Stack, Text } from "@mantine/core";
import { IconPin } from "@tabler/icons-react";
import styles from "@/routes/promo-code-campaigns/_components/promo.module.css";

const ContactInterests: React.FC<{ interests: string }> = ({ interests }) => {
  let parsedInterests: string[] = [];
  try {
    const cleaned = interests
      .replaceAll("\\", "")
      .replace(/[{}"]/g, "")
      .replace(/[()]/g, "");
    parsedInterests = cleaned
      .split(",")
      .map((item) => item.trim())
      .filter((item) => item.length > 0);
  } catch (err) {
    console.error("Error parsing interests:", err);
  }
  return (
    <Flex direction={"column"} gap={28}>
      <Flex gap={8} align={"center"}>
        <span className={styles.sectionIcon}>
          <IconPin size={15} />
        </span>
        <Text fz={14} fw={600}>
          Interests
        </Text>
      </Flex>
      {parsedInterests?.length ? (
        <Stack>
          <Text fz={12} c={"dark.11"}>
            Selected Interest
          </Text>
          <Flex mt={8} align={"center"} gap={8} wrap={"wrap"}>
            {parsedInterests?.map((item) => (
              <Badge
                key={item}
                variant="light"
                radius={4}
                c={"dark"}
                fz={13}
                tt={"capitalize"}
                size="lg"
                fw={500}
              >
                {item.toLowerCase()}
              </Badge>
            ))}
          </Flex>
        </Stack>
      ) : null}
    </Flex>
  );
};

export default ContactInterests;