'use client'
import { useState } from "react"

export default function InputCommon() {
  const [fileName, setFileName] = useState<File | null>(null); //file name value

  return (
    <div className="form-design-wrap">
      <div className="design-box" >
        <h1 className="tit" >Input</h1>
        <div className="design-grid-wrap">
          <input className="input-frame" type="text" placeholder="Input Frame Text"/>
          <input className="input-frame" type="number" placeholder="Input Frame Number"/>
          <input className="input-frame" type="password" placeholder="Input Frame Password"/>
          <input className="input-frame" type="email" placeholder="Input Frame Email"/>
          <input className="input-frame" type="text" placeholder="Input Frame Disabled" defaultValue={'defaultValue'} disabled/>
          <input className="input-frame" type="text" placeholder="Input Frame ReadOnly" readOnly/>
          <div className="filebox">
            <input className="input-frame" placeholder="Input Frame File" defaultValue={fileName?.name} readOnly />
            <label className="file-upload" htmlFor="file">Upload File</label>
            <input type="file" id="file" onChange={(e) => setFileName(e.target.files?.[0] ?? null)}/>
          </div>
          <div className="search-input">
            <input type="text" className="search-frame" placeholder="Input Frame Search"/>
            <button className="search-icon"></button>
          </div>
          <div className="date-input">
            <button className="date-btn"><i className="date-icon"></i></button>
            <input type="text" className="date-frame" placeholder="Input Frame Date"/>
          </div>
          <div className="login-input id">
            <input type="text" className="login-frame" placeholder="Input Frame ID"/>
            <button className="login-icon"><i className="del-icon"></i></button>
          </div>
          <div className="login-input pw">
            <input type="text" className="login-frame" placeholder="Input Frame PW"/>
            <button className="login-icon act"><i className="show-icon"></i></button>
          </div>
        </div>
      </div>
      <div className="design-box" >
        <h1 className="tit" >Button</h1>
        <div className="design-grid-wrap" >
          <button className="btn-frame d-blue min">Block Button</button>
          <button className="btn-frame n-blue min">Block Button</button>
          <button className="btn-frame red min">Block Button</button>
          <button className="btn-frame d-blue">Block Button</button>
          <button className="btn-frame n-blue">Block Button</button>
          <button className="btn-frame l-blue">Block Button</button>
          <button className="btn-frame red">Block Button</button>
          <button className="btn-frame d-blue icon">Block Icon Button<i className="btn-arr"></i></button>
          <button className="btn-frame n-blue icon">Block Icon Button<i className="btn-arr"></i></button>
          <button className="btn-frame red icon">Block Icon Button<i className="btn-arr"></i></button>
          <button className="btn-frame l-blue icon"><i className="btn-clip"></i>Block Icon Button</button>
          <button className="btn-frame icon login">Block Big Button <i className="btn-arr"></i></button>
          <button className="btn-frame" disabled>Block Button</button>
        </div>
      </div>
      <div className="design-box" >
        <h1 className="tit" >Check Box</h1>
        <div className="design-grid-wrap" >
          <div className="check-form-box">
            <input type="checkbox" id="ch01"/>
            <label htmlFor="ch01">Check Box</label>
          </div>
          <div className="check-form-box">
            <input type="checkbox" id="ch02"/>
            <label htmlFor="ch02">Check Box</label>
          </div>
          <div className="check-form-box">
            <input type="checkbox" id="ch03" defaultChecked/>
            <label htmlFor="ch03">Check Box</label>
          </div>
          <div className="check-form-box">
            <input type="checkbox" id="ch04" defaultChecked/>
            <label htmlFor="ch04">Check Box</label>
          </div>
          <div className="check-form-box">
            <input type="checkbox" id="ch05" disabled/>
            <label htmlFor="ch05">Check Box</label>
          </div>
          <div className="check-form-box">
            <input type="checkbox" id="ch06" disabled/>
            <label htmlFor="ch06">Check Box</label>
          </div>
        </div>
      </div>
      <div className="design-box" >
        <h1 className="tit" >Radio Button</h1>
        <div className="design-grid-wrap" >
          <div className="radio-form-box">
            <input type="radio" name="radio01" id="ra01" />
            <label htmlFor="ra01">Radio Button</label>
          </div>
          <div className="radio-form-box">
            <input type="radio" name="radio01" id="ra02" defaultChecked/>
            <label htmlFor="ra02">Radio Button</label>
          </div>
          <div className="radio-form-box">
            <input type="radio" name="radio03" id="ra05" disabled/>
            <label htmlFor="ra05">Radio Button</label>
          </div>
        </div>
      </div>
      <div className="design-box">
        <h1 className="tit" >Toggle Button</h1>
        <div className="design-grid-wrap" >
          <div>
            <label className="toggle-btn">
                <input type="checkbox"/>
                <span className="slider"></span>
            </label>
          </div>
        </div>
      </div>
      <div className="design-box" >
        <h1 className="tit" >Select Box</h1>
        <div className="design-grid-wrap" >
          <select className="select-form" name="" id="">
            <option value="">Select01</option>
            <option value="">Select02</option>
            <option value="">Select03</option>
            <option value="">Select04</option>
            <option value="">Select05</option>
          </select>
          <select className="select-form" name="" id="" disabled>
            <option value="">Select01</option>
            <option value="">Select02</option>
            <option value="">Select03</option>
            <option value="">Select04</option>
            <option value="">Select05</option>
          </select>
          <div className="select-flex-form">
            <select className="select-form" name="" id="">
              <option value="">Select01</option>
              <option value="">Select02</option>
              <option value="">Select03</option>
              <option value="">Select04</option>
              <option value="">Select05</option>
            </select>
            <select className="select-form" name="" id="">
              <option value="">Select01</option>
              <option value="">Select02</option>
              <option value="">Select03</option>
              <option value="">Select04</option>
              <option value="">Select05</option>
            </select>
            <select className="select-form" name="" id="" disabled>
              <option value="">Select01</option>
              <option value="">Select02</option>
              <option value="">Select03</option>
              <option value="">Select04</option>
              <option value="">Select05</option>
            </select>
          </div>
        </div>
      </div>
      <div className="design-box" >
        <h1 className="tit" >TextArea</h1>
        <div className="design-grid-wrap" >
          <textarea className="textarea-form" name="" id="" placeholder="TextArea Filed"></textarea>
          <textarea className="textarea-form" name="" id="" disabled></textarea>
        </div>
      </div>
      <style jsx>
        {`
          .form-design-wrap {
            max-width: 1300px;
            margin: 0px auto;
            padding: 25px 20px;
          }
          .design-box {
            padding: 15px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border-radius: 5px;
            margin-bottom: 25px;
          }
          .tit {
            font-size: 24px;
            font-weight: 600;
            color: #000;
            border-bottom: 1px solid #000;
            padding-bottom: 5px;
          }
          .design-grid-wrap {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 20px;
            gap: 10px;
          }
          .icon-bx {
            width: 10px;
            height: 10px;
            margin-right: 5px;
            background-color: #000;
          }
        `}
      </style>
    </div>
  )
}