import { styled } from 'styleh-components'
import {
  SelectDropDown,
  StyledOption,
} from '@skava/ui/dist/components/molecules/SelectDropDown'

const StyledColorSelectDropDown = styled(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(StyledOption).attrs({
  role: 'option',
}) `
  display: flex;
  align-items: center;
`

export { StyledColorSelectDropDown, ColorItemContent, ColorOption }