import React from 'react';
import {
  StyledCell,
  StyledCellText,
  StyledFilledMask,
  StyledMask,
} from './StyledPinInput';
import type { State } from './StyledPinInput';

function PinCell({
  value,
  secure = true,
  focused = false,
  state = 'default',
}: {
  value: string;
  secure?: boolean;
  focused?: boolean;
  state?: State;
}) {
  return (
    <StyledCell
      themeFocused={focused}
      themeState={state}
      accessibilityState={{ selected: focused }}
      testID="pin-cell"
    >
      {value === '' && <StyledMask themeState={state} testID="pin-cell-mask" />}
      {value !== '' && secure && (
        <StyledFilledMask themeState={state} testID="pin-cell-filled-mask" />
      )}
      {value !== '' && !secure && (
        <StyledCellText themeState={state} level="h3">
          {value}
        </StyledCellText>
      )}
    </StyledCell>
  );
}

export default PinCell;