import styled from "styled-components";
import { FiSearch } from "react-icons/fi";
import { RiEqualizerLine } from "react-icons/ri";
import { SearchFilterIcon } from "../svg/searchFilter";
import { SearchSvg } from "../svg/search-normal";

export const Container = styled.div`
  display: flex;
  // justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
`;

export const SearchBarContainer = styled.div`
  display: flex;
  align-items: center;
  position: relative;
  height: ${({ heightSize }) => heightSize || "50px"};
  width: ${({ widthSize }) => widthSize || "100%"};
  border: ${({ border }) => border || "1px solid #DFE6E6"};
  border-radius: ${({ borderRadius }) => borderRadius || "12px"};
  background-color: #ffffff;
  transition: box-shadow 0.2s ease;
  transition: all 0.3s;
  &:focus-within {
    box-shadow: 0 0 0 1px ${({ outlineColor }) => outlineColor || "#FEBF10"};
  }

  svg {
    margin-right: 20px;
    // display: ${({ display }) => display || "none"}
  }
`;

export const SearchIcon = styled.div`
  position: absolute;
  margin-left: 12px;
  color: #adb3b3;
  font-size: 20px;
  margin-top: 6px;
`;

export const SearchInput = styled.input`
  width: 100%;
  height: 100%;
  margin-left: 32px;
  padding: 12px;
  border: none;
  border-radius: ${({ borderRadius }) => borderRadius || "12px"};
  font-size: 16px;
  background-color: #ffffff;
  color: #333333;
  outline: none;
  &::placeholder {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #adb3b3;
  }

  &:focus {
    border: none;
    box-shadow: none;
    outline: none;
  }
`;

export const WarningText = styled.div`
  // position: absolute;
  // right: 10px;
  // font-size: 14px;
  // color: #e74c3c;

  position: absolute;
  right: 2%;
  bottom: -40%;
  font-size: 12px;
  color: #e74c3c;
`;

export const SuggestionList = styled.ul`
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid #dfe6e6;
  background-color: #f1f1f1;
  z-index: 10;
`;

export const SuggestionItem = styled.li`
  padding: 8px 12px;
  cursor: pointer;
  &:hover {
    background-color: #dddddd;
  }
`;

export const OptionIcon = styled(SearchFilterIcon)`
  color: ${({ outlineColor }) => outlineColor || "#ADB3B3"};
  font-size: 18px;
  display: none;
`;

export const OptionIconSearch = styled(SearchFilterIcon)`
  color: ${({ outlineColor }) => outlineColor || "#ADB3B3"};
  font-size: 18px;
  margin-right: 30px;
  visibility: hidden;
`;
