import { S, inputStyle } from '../OilSpillReportTemplate';

export function ECell({
  value,
  editing,
  onChange,
  align,
  placeholder,
}: {
  value: string;
  editing: boolean;
  onChange?: (v: string) => void;
  align?: 'left' | 'center';
  placeholder?: string;
}) {
  const style = align === 'left' ? S.tdLeft : S.td;
  if (!editing) {
    return (
      <td
        style={{
          ...style,
          color: value ? 'var(--fg-default)' : 'var(--fg-disabled)',
          fontStyle: value ? 'normal' : 'italic',
        }}
      >
        {value || placeholder || '-'}
      </td>
    );
  }
  return (
    <td style={style}>
      <input
        style={{ ...inputStyle, textAlign: align || 'center' }}
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        placeholder={placeholder}
      />
    </td>
  );
}
