import { NumericFormat } from 'react-number-format';
import { IMAGE_ROOT } from '@/shared/constants/common';

export const CalendarWrap = () => {
  return (
    <>
      <div className="calendar-wrap">
        <div className="input-wrapper top-select">
          <select>
            <option value="1">nicetest00g</option>
            <option value="2">nicetest00g</option>
            <option value="3">nicetest00g</option>
          </select>
        </div>
        
        <div className="month-group">
          <button 
            className="month-btn" 
            aria-label="이전 달"
          >
            <img 
              src={ IMAGE_ROOT + '/ico_date_prev.svg' }
              alt="이전"
            />
          </button>
          <div className="month-title">2024년 3월</div>
          <button 
            className="month-btn" 
            aria-label="다음 달"
          >
            <img 
              src={ IMAGE_ROOT + '/ico_date_next.svg' }
              alt="다음"
            />
          </button>
        </div>

        <div className="amount-group">
          <div className="amount-row">
            <div className="amount-label">정산 <span className="complete">완료</span> 금액</div>
            <div className="amount-value">
              <NumericFormat
                value={ '734723983000' } 
                thousandSeparator
                displayType="text"
                suffix={ '원' }
              ></NumericFormat>
            </div>
          </div>
          <div className="amount-row">
            <div className="amount-label">정산 <span className="scheduled">예정</span> 금액</div>
            <div className="amount-value">
              <NumericFormat
                value={ '465323000' } 
                thousandSeparator
                displayType="text"
                suffix={ '원' }
              ></NumericFormat>
            </div>
          </div>
        </div>

        <div className="legend-group">
          <div className="legend-item">
            <div className="legend-dot complete"></div>
            <div className="legend-text">정산 완료</div>
          </div>
          <div className="legend-item">
            <div className="legend-dot scheduled"></div>
            <div className="legend-text">입금 예정</div>
          </div>
        </div>

        <div className="calendar-grid">
          <div className="weekdays">
            <div className="weekday sun">일</div>
            <div className="weekday">월</div>
            <div className="weekday">화</div>
            <div className="weekday">수</div>
            <div className="weekday">목</div>
            <div className="weekday">금</div>
            <div className="weekday sat">토</div>
          </div>
          <div className="days">
            <div className="day other">29</div>
            <div className="day other">30</div>
            <div className="day complete">1</div>
            <div className="day">2</div>
            <div className="day">3</div>
            <div className="day">4</div>
            <div className="day">5</div>
            <div className="day">6</div>
            <div className="day complete">7</div>
            <div className="day">8</div>
            <div className="day">9</div>
            <div className="day complete">10</div>
            <div className="day">11</div>
            <div className="day">12</div>
            <div className="day">13</div>
            <div className="day">14</div>
            <div className="day">15</div>
            <div className="day">16</div>
            <div className="day complete">17</div>
            <div className="day complete">18</div>
            <div className="day">19</div>
            <div className="day">20</div>
            <div className="day">21</div>
            <div className="day">22</div>
            <div className="day complete">23</div>
            <div className="day">24</div>
            <div className="day">25</div>
            <div className="day">26</div>
            <div className="day">27</div>
            <div className="day scheduled">28</div>
            <div className="day scheduled">29</div>
            <div className="day">30</div>
            <div className="day">31</div>
            <div className="day other">1</div>
            <div className="day other">2</div>
          </div>
        </div>

        <div className="settlement-list">
          <div className="settlement-item">
            <div className="settlement-tag scheduled">예정</div>
            <div className="settlement-date">03.29 (금)</div>
            <div className="settlement-amount">
              <NumericFormat
                value={ '34837000' } 
                thousandSeparator
                displayType="text"
                suffix={ ' 원' }
              ></NumericFormat>
            </div>
          </div>
          <div className="settlement-item">
            <div className="settlement-tag scheduled">예정</div>
            <div className="settlement-date">03.28 (목)</div>
            <div className="settlement-amount">
              <NumericFormat
                value={ '834374000' } 
                thousandSeparator
                displayType="text"
                suffix={ ' 원' }
              ></NumericFormat>
            </div>
          </div>
          <div className="settlement-item">
            <div className="settlement-tag complete">확정</div>
            <div className="settlement-date">03.27 (수)</div>
            <div className="settlement-amount">
              <NumericFormat
                value={ '23345000' } 
                thousandSeparator
                displayType="text"
                suffix={ ' 원' }
              ></NumericFormat>
            </div>
          </div>
          <div className="settlement-item">
            <div className="settlement-tag complete">확정</div>
            <div className="settlement-date">03.25 (월)</div>
            <div className="settlement-amount">
              <NumericFormat
                value={ '84847000' } 
                thousandSeparator
                displayType="text"
                suffix={ ' 원' }
              ></NumericFormat>
            </div>
          </div>
          <div className="settlement-item">
            <div className="settlement-tag complete">확정</div>
            <div className="settlement-date">03.19 (화)</div>
            <div className="settlement-amount">
              <NumericFormat
                value={ '57235000' } 
                thousandSeparator
                displayType="text"
                suffix={ ' 원' }
              ></NumericFormat>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};