import { useRef, useState, useEffect } from 'react'
import Wizard from '@components/wizard'
import Address from '../../views/forms/wizard/steps-with-validation/Address'
import SocialLinks from '../../views/forms/wizard/steps-with-validation/SocialLinks'
import PersonalInfo from '../../views/forms/wizard/steps-with-validation/PersonalInfo'
import AccountDetails from '../../views/forms/wizard/steps-with-validation/AccountDetails'
import { Card, CardBody, CardTitle, CardText, Form, FormGroup, Label, Input, CustomInput, Button } from 'reactstrap'
import '@styles/base/pages/page-auth.scss'
import { ArrowRight } from 'react-feather'
import '../../assets/css/custom.css'

const DesignRegister = () => {
  const [stepper, setStepper] = useState(null)
  const ref = useRef(null)

  const steps = [
    {
      id: 'account-details',
      title: '약관동의',
      subtitle: 'STEP01',
      content: <AccountDetails stepper={stepper} type='wizard-horizontal' />
    }
  ]

  return (
    <div className='pal-register'>
      <div className='auth-wrapper auth-v1 px-2'>
        <div className='auth-inner py-2'>
          <div className='horizontal-wizard'>
            <Wizard instance={el => setStepper(el)} ref={ref} steps={steps} />
          </div>
        </div>
      </div>
    </div>
  )
}

export default DesignRegister;