import styled, { css, keyframes } from "styled-components";
import { FaAngleDown } from "react-icons/fa";

const fadeIn = keyframes`
  from {
    opacity: 0;
     transform: translateY(-10px);
  }

  to {
    opacity: 1;
     transform: translateY(0);
  }
`;

export const SelectWrapper = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
 
`;
export const Dropdown = styled.div`
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: ${({ borderRadius }) => borderRadius}px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: ${({ animate }) => (animate ? fadeIn : "none")} 0.2s ease-in-out;

  &::-webkit-scrollbar {
    width: 4px;
    background-color: #f5f5f5;
  }

  /* color of scrollbar handle */
  &::-webkit-scrollbar-thumb {
    background-color: ${({ color }) => color};
    border-radius: 5px;
  }

  /* hover effect on scrollbar handle */
  &::-webkit-scrollbar-thumb:hover {
    background-color: #a6a6a6;
  }
`;

export const DropdownItem = styled.div`
  padding: 8px 16px;
  font-size: ${({ size }) => size}px;

  cursor: pointer;

  color: ${({ active, color }) => active ? "#ffffff" : color };
  background: ${({ active, color }) => active ? "#ffbf36" : "rgba(255, 255, 255, 0.507)" };

  &:hover {
    background-color: #f7f7f7;
  }
`;

export const SearchInput = styled.input`
  display: ${({ searchable }) => (searchable ? "block" : "none")};
  width: 100%;
  padding: 8px 16px;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: ${({ size }) => size}px;
  border-radius: ${({ borderRadius }) => borderRadius}px;
  color: ${({ color }) => color};
  outline: none;
  ${({ bordered, color }) =>
    bordered &&
    css`
      border: 2px solid ${color};
    `}
`;

export const Label = styled.label`
  display: block;
  font-size: ${({ size }) => size}px;
  margin-bottom: 8px;
  color: ${({ color }) => color};
`;

export const Icon = styled(FaAngleDown)`
  position: absolute;
  top: 70%;
  right: 10px;
  transform: translateY(-50%);
  font-size: ${({ size }) => size}px;
  color: ${({ color }) => color};
  cursor: pointer;
`;
