import { styled } from 'styleh-components'
import {
  SelectDropDown,
  StyledOption,
} from 'molecules/SelectDropDown'

const StyledColorSelectDropDown = styled.withComponent(SelectDropDown) `
`

const ColorItemContent = styled.div `
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-light-grey);

  ${props =>
    props.value &&
    (props.value.includes('https') || props.value.includes('http')) &&
    styled.css `
      background-image: url(${props.value});
    `};

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

export {
  StyledColorSelectDropDown,
  ColorItemContent,
  ColorOption,
}