import {StyleProp, StyleSheet, View, ViewProps, ViewStyle} from 'react-native'
import React from 'react'
import {Utils} from 'tuya-panel-kit'

const cx = Utils.RatioUtils.convertX

interface ColorsLineProps extends ViewProps {
  colors: string[]
  nodeStyle?: StyleProp<ViewStyle>
}

const ColorsLine = (props: ColorsLineProps) => {
  return (
    <View style={[styles.root, props.style]}>
      {
        props.colors.map((color, index) => {
          return (
            <View
              key={`${index}`}
              style={[
                styles.colorNode,
                {
                  backgroundColor: color,
                  marginStart: index === 0 ? 0 : cx(5),
                },
                props.nodeStyle,
              ]}/>
          )
        })
      }
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    flexDirection: 'row',
    width: cx(295),
    height: cx(24),
  },
  colorNode: {
    flex: 1,
    height: cx(24),
    borderRadius: cx(8),
  },
})

export default ColorsLine