import { useState } from 'react';
import { Search } from 'lucide-react'
import styled from 'styled-components';

const Input = styled.input`
  height: 30px;
  width: 300px;
  border-radius: 2px;
`
const TopNavBarWrapper = styled.div`
  padding: 20px;
  gap: 0;

  i {
    font-size: 20.5px;
  }

  ${Input} {
    font-size: 14px;
    border-radius: 2px;
    background-color: rgba(51, 51, 51, .4);
    /* color: hsl(var(--muted) / .4); */
    //#333333;
    transition: 0.1s ease-in-out;
  }

  ${Input}:focus {
    width: 340px;
    transition: 0.1s ease-in-out;
    outline: none;
    color: #f8f8f8;

    & ~ .searchBtn {
      background-color: hsl(var(--muted) / .3);
      /* background-color: rgb(255 255 255 / 0.2); */
    }
    & ~ .searchBtn i {
     // color: hsl(var(--muted) / .9);
     color: gray;
    }

    & ~ i { transition: 0.1s ease-in-out; }
  }

  ${Input}::placeholder {
   color: gray;
    // color: rgba(51, 51, 51, 0.5)
    /* color: hsl(var(--muted) / .9); */
  }
`

const InputWrapper = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
`

const SearchBar = ({ onSearchSubmit }) => {
  const [query, setQuery] = useState('');

  const handleInputChange = (event) => {
    setQuery(event.target.value)
  };

  const handleSubmit = (event) => {
    event.preventDefault()
    onSearchSubmit(query)
    setQuery('')
  };

  return (
    <TopNavBarWrapper>
      <form onSubmit={handleSubmit} 
        className='invisible lg:visible absolute top-[24px] right-24'>
        <div className="relative">
            <Search className="absolute border-0 left-2 top-[9px] h-4 w-4 text-muted/40" />
              <InputWrapper>
                <Input
                type="search"
                placeholder="Search..."
                className="-top-[.9px] border-0 focus:outline-none appearance-none pl-8 shadow-none md:w-2/3 lg:w-1/3 transition duration-150 ease-in-out"
                value={query}
                onChange={handleInputChange}
                />
                <button type="submit" className="searchBtn px-[10px] py-[3.5px] transition-all focus:bg-gray-700/40 text-muted/40 font-bold rounded-md">
                    <i className="relative top-[.9px] fa fa-search !focus:text-white mr-1 place-items-center"/> 
                </button>
             </InputWrapper>
        </div>
      </form>
    </TopNavBarWrapper>
  )
}

export default SearchBar