import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from 'react';

export default function Penal03(){
    const [penalAct, setPenalAct] = useState(true);
    return(
        <WithDraggable isShow={true} handle=".penal-wrap">
            <div className={`penal-wrap ${penalAct ? 'act': ''}`} >
                <h2>パネル配置集計</h2>
                <button className="penal-arr" onClick={() => setPenalAct(!penalAct)}></button>
                <div className="penal-table-wrap">
                    <table className="penal-table">
                        <thead>
                            <tr>
                                <th>屋根面</th>
                                <th>Q.TRON-MGQ.TRON-MGQ.TRON-MG</th>
                                <th>Q.TRON-MGQ.TRON-MGQ.TRON-MG</th>
                                <th>発電量 (kW)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>M 1</td>
                                <td className="al-r">8</td>
                                <td className="al-r">3,440</td>
                                <td className="al-r">3,440</td>
                            </tr>
                            <tr>
                                <td>合計</td>
                                <td className="al-r">8</td>
                                <td className="al-r">3,440</td>
                                <td className="al-r">3,440</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </WithDraggable>
    )
}