import { styled } from 'view-container'
import {
  SelectDropDown,
  StyledOption,
  ActiveOption,
} from 'molecules/SelectDropDown'

const StyledColorSelectDropDown = styled.withComponent(SelectDropDown) `
`

const ColorItemContent = styled.div `
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #a7afc1;

  ${props =>
    props.value &&
    props.value.includes('#') &&
    styled.css `
      background-color: ${props.value};
    `};

  ${props =>
    props.value &&
    styled.css `
      background-color: ${props.value};
    `};

  ${props =>
    props.value &&
    props.value.includes('http') &&
    styled.css `
      background-image: url(${props.value});
    `};
`
const ColorOption = styled.withComponent(StyledOption).attrs({
  role: 'option',
}) `
  display: flex;
  align-items: center;
`

const StyledActiveOption = styled.withComponent(ActiveOption) `
`

export {
  StyledColorSelectDropDown,
  ColorItemContent,
  ColorOption,
  StyledActiveOption,
}