// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React, { useState } from 'react';
// import styled from 'styled-components';
// import AutoComplete, { Tip } from '../lib/AutoComplete/AutoComplete';
// import LeftIcon from '../lib/icons/left2.svg';
//
// const Wrap = styled.div`
//   display: flex;
//   flex-direction: column;
//   gap: 50px;
//   justify-content: start;
//   align-items: start;
//   line-height: 1.5em;
//   > .row {
//     display: flex;
//     flex-direction: row;
//     gap: 50px;
//     justify-content: center;
//     align-items: center;
//     width: 600px;
//     height: 500px;
//   }
// `;
//
// const tips: Tip[] = [
//   {
//     id: 1,
//     message: 'xxx'
//   },
//   {
//     id: 2,
//     message: 'yyy'
//   },
//   {
//     id: 3,
//     message: 'zzz'
//   },
//   {
//     id: 4,
//     message: 'yyy'
//   },
//   {
//     id: 5,
//     message: 'yyy'
//   },
//   {
//     id: 6,
//     message: 'yyy'
//   },
//   {
//     id: 7,
//     message: 'yyy'
//   },
//   {
//     id: 8,
//     message: 'yyy'
//   },
//   {
//     id: 9,
//     message: 'yyy'
//   },
//   {
//     id: 10,
//     message: 'yyy'
//   },
//   {
//     id: 11,
//     message: 'yyy'
//   },
//   {
//     id: 12,
//     message: 'yyy'
//   }
// ];
//
// const Home: React.FC = () => {
//   const [value, setValue] = useState<string>('111');
//   const fn = (selected: string) => {
//     console.log(selected);
// setValue(selected);
//   };
//   return (
//     <Wrap>
//       <div className="row">
//         <AutoComplete tips={tips} value={value} callback={fn}>
//           <LeftIcon width="0.8em" height="0.8em" style={{ transform: 'rotate(-90deg)' }} />
//         </AutoComplete>
//       </div>
//     </Wrap>
//   );
// };
//
// export default Home;