// LinktreePage.js
import React, { useState, useEffect } from 'react';
import styles from './Join.module.css'; // Import the module.css file
import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function

const LinktreePage = ({ cafeId, setModal, handleClose, welcomePageConfig }) => {
  const [musicFilter, setMusicFilter] = useState('');

  useEffect(() => {
    console.log(welcomePageConfig)
    if (welcomePageConfig) {
      const parsedConfig = JSON.parse(welcomePageConfig);
      setMusicFilter(parsedConfig.musicFilter)
    }
  }, [welcomePageConfig]);

  const handleSave = async () => {
    setModal("loading");

    const details = {
      musicFilter
    };

    try {
      const result = await saveWelcomePageConfig(cafeId, details);
    } catch (error) {
      setModal("message", { captMessage: 'Gagal menerapkan filter' }, null, null);
    } finally {
      handleClose();
    }
  };

  return (
    <div className={styles.linktreePage}>
        <div className={styles.dashboardContainer}>
          <div className={styles.mainHeading}>Filter jenis musik</div>
          <div className={styles.descHeading}>Masukkan prompt untuk Gemini AI</div>
          <input value={musicFilter} onChange={(e)=>setMusicFilter(e.target.value)} className={styles.input} placeholder="hanya musik santai"type="text"/>
          <div onClick={handleSave} className={styles.button}>Simpan</div>
        </div>
    </div>
  );
};

export default LinktreePage;
