// src/OptionPage.js
import { useEffect, useState } from 'react';
import '../css/global.css';
import '../css/textBox.css';
import '../css/nameBox.css';
import '../css/option.css'
import Animation from './components/animation.jsx';

function OptionPage({data , onClicked}) {
  const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
  const [name] = useState(() => {
    return sessionStorage.getItem("name") || '';
  });

  const DialogText = data.text ? data.text.replace("{name}", name) : null;
  const DialogName = data.name ? data.name.replace("{name}", name) : null;

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100svh',
        width: '100svw',
        flexDirection: 'column',
        backgroundImage: `url(${backgroundSRC})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      <div className='spriteBox'>
        <Animation src={`F${data.sprite}`}/>
      </div>
      <div className='optionSection'>
        {
            data.option.map((item,i) =>
                <div onClick={()=>onClicked(item.goTo-1)} key={i} className='optionBox title'>{item.text}</div>)
        }
      </div>
      {DialogName && DialogText && (
        <>
        <div style={{ width: '60vw' }}>
        <div className="nameBox title">
        {DialogName}
        </div>
        </div>
        <div className="textBox title" style={{ overflow: 'scroll' }}>
        {DialogText}
        </div>
        </>
      )}
    </div>
  );
}

export default OptionPage;