import { View } from '@tarojs/components';
import type { MlReadonlyInputProps } from './types';
import { classNames, isEmpty } from 'mixlea-utils-js';

export function MlReadonlyInput(props: MlReadonlyInputProps) {
  const paddingLeft = props.paddingLeft ?? props.paddingX;
  const paddingRight = props.paddingRight ?? props.paddingX;

  const showPlaceholder = isEmpty(props.value);

  return (
    <View
      style={props.style}
      className={classNames(props.className, 'h-full w-full truncate text-clip', {
        'pl-base': paddingLeft,
        'pr-base': paddingRight,
        'text-[--text-color-200]': showPlaceholder,
        'text-center': props.align === 'center',
        'text-right': props.align === 'right',
      })}
    >
      {showPlaceholder ? props.placeholder : props.value}
    </View>
  );
}