'use client'

import { useState } from "react";
import SaleDefaultDetailForm from "./saledefaultdetail/SaleDefaultDetailForm";
import SaleDefaultDetailForm02 from "./saledefaultdetail/SaleDefaultDetailForm02";
import SaleRoofDetailForm from "./saleroofdetail/SaleRoofDetailForm";
import SaleRoofDetailForm02 from "./saleroofdetail/SaleRoofDetailForm02";

export default function SaleDetailContents(){
  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">
          <SaleDefaultDetailForm/>
          <SaleDefaultDetailForm02/>
        </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">
          <SaleRoofDetailForm/>
          <SaleRoofDetailForm02/>
        </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 className="btn-bx">
            <button className="btn-frame n-blue icon">削除<i className="btn-arr"></i></button>
          </div>
        </div>
      </div>
    </div>
  )
}