import React, { useState, ReactNode } from 'react';
import type { DrawerProps } from 'antd';
import {  Badge, Button, Drawer, Space } from 'antd';
import CardItem from '../Cart/CardItem';
import { BsArrowLeft, BsCart, BsSearch } from 'react-icons/bs';
import { Link } from 'react-router-dom';
import { ShoppingCartOutlined } from '@ant-design/icons';
import { useCartData } from '../../Redux/DispatchData';
import { useTranslation } from 'react-i18next';
import { TiDeleteOutline } from "react-icons/ti";
import SearchButton from '../Utils/Search/SearchButton';
import { GoClock } from "react-icons/go";
import { FiDelete } from "react-icons/fi";
import { RiSearch2Line, RiSearchLine } from "react-icons/ri";



const SearchWithDrawer = () => {
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
  const { DataCart,count} = useCartData()
  const {t} = useTranslation();


  return (
    <>
      <Space>
          <div onClick={()=>setOpen(true)} className="icon_navbar">
             <RiSearchLine  />
          </div>
      </Space>

      <Drawer
        title={""}
        placement={placement}
        closable={false}
        onClose={() => setOpen(false)}
        open={open}
        key={placement}
        width ={700}
        style={{maxHeight:"40%"}}
      >
        <div className="search_first_section">
          <SearchButton/>
          <span className='delete_icon' onClick={()=>setOpen(false)}><TiDeleteOutline/></span>
        </div>


          
      </Drawer>
    </>
  );
};

export default SearchWithDrawer;

