'use client'

import { useState } from "react";
import SaleDefaultForm from "./saledefault/SaleDefaultForm";
import SaleDefaultForm02 from "./saledefault/SaleDefaultForm02";
import SaleRoofForm from "./saleroof/SaleRoofForm";
import SaleRoofForm02 from "./saleroof/SaleRoofForm02";
export default function SaleEidtContents(){
  const [defaultValue, setDefaultValue] = useState(false); //기본정보 tab
  const [roofValue, setRoofValue] = useState(false); //전기/지붕 정보 tab

  return(
    <div className="sale-detail-toggle-wrap">
      <div className={`sale-detail-toggle-bx ${defaultValue ? 'act' : ''}`}>
        <div className="sale-detail-toggle-head" onClick={() => setDefaultValue(!defaultValue)}>
          <div className="sale-detail-toggle-name">基本情報</div>
          <div className="sale-detail-toggle-btn-wrap">
            <button className="sale-detail-toggle-btn" ></button>
          </div>
        </div>
        <div className="sale-detail-toggle-cont">
          <SaleDefaultForm/>
          <SaleDefaultForm02/>
        </div>
      </div>
      <div className={`sale-detail-toggle-bx ${roofValue ? 'act' : ''}`}>
        <div className="sale-detail-toggle-head" onClick={() => setRoofValue(!roofValue)}>
          <div className="sale-detail-toggle-name">電気 / 屋根情報</div>
          <div className="sale-detail-toggle-btn-wrap">
            <button className="sale-detail-toggle-btn" ></button>
          </div>
        </div>
        <div className="sale-detail-toggle-cont">
          <SaleRoofForm/>
          <SaleRoofForm02/>
        </div>
      </div>
      <div className="sale-form-btn-wrap">
        <div className="btn-flex-wrap">
          <div className="btn-bx">
            <button className="btn-frame n-blue icon">一時保存<i className="btn-arr"></i></button>
          </div>
          <div className="btn-bx">
            <button className="btn-frame red icon">保存<i className="btn-arr"></i></button>
          </div>
          <div className="btn-bx">
            <button className="btn-frame n-blue icon">リスト<i className="btn-arr"></i></button>
          </div>
        </div>
      </div>
    </div>
  )
}