import styled from '@emotion/styled';

const SelectWrapper = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: space-between;
`;

const SelectContainer = styled.div`
  position: relative;
  width: 100%;
`;

const SelectButton = styled.button`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  border: 0.06rem solid var(--Stroke, rgba(0, 0, 0, 0.1));
  border-radius: 0.5rem;
  background: var(--White, rgba(255, 255, 255, 1));
  cursor: pointer;
  gap: 0.375rem;

  &:hover {
    border-color: var(--GreyDark, rgba(74, 85, 101, 1));
  }

  &:focus {
    outline: none;
    border-color: var(--GreyDark, rgba(74, 85, 101, 1));
  }
`;

const Dropdown = styled.div`
  position: absolute;
  z-index: 4;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 15rem;
  overflow-y: auto;
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 0.06rem solid var(--Stroke, rgba(0, 0, 0, 0.1));
  border-radius: 1rem;
  box-shadow:
    0rem 2rem 4rem -2rem rgba(0, 0, 0, 0.1),
    0rem 4rem 6rem -1rem rgba(0, 0, 0, 0.1);
  background: var(--White, rgba(255, 255, 255, 1));
`;

const Option = styled.div`
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  cursor: pointer;
  border-bottom: 0.06rem solid var(--Stroke, rgba(0, 0, 0, 0.1));

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background: var(--GreyLight, rgba(243, 243, 245, 1));
  }

  ${(props) =>
    props.selected &&
    `
    background: var(--GreyLight, rgba(243, 243, 245, 1));
  `}
`;

const OptionName = styled.div`
  color: var(--GreyDark, rgba(74, 85, 101, 1));
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.25rem;
  letter-spacing: 0rem;
  text-align: left;
`;

const Chevron = styled.span`
  transition: transform 0.2s;
  transform: ${(props) => (props.isOpen ? 'rotate(180deg)' : 'rotate(0)')};
  color: var(--GreyDark, rgba(74, 85, 101, 1));
`;

const SelectedValue = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
`;
const Placeholder = styled.span`
  color: #999;
  font-style: italic;
`;
export {
  SelectWrapper,
  SelectContainer,
  SelectButton,
  Dropdown,
  Option,
  OptionName,
  Chevron,
  SelectedValue,
  Placeholder,
};
