import React from 'react';
import {View} from 'react-native';
import {LinearGradient} from 'expo-linear-gradient';
import {Typography} from '@components';

import {
  GLASS_BORDER_COLORS,
  GLASS_BORDER_END,
  GLASS_BORDER_START,
  HERO_TEXT,
  HERO_TEXT_MUTED,
  styles,
} from './styles';

const pad = (value: number): string => String(value).padStart(2, '0');

interface Props {
  label: string;
  value: number;
}

export function CountdownBox({label, value}: Props) {
  return (
    <LinearGradient
      colors={GLASS_BORDER_COLORS}
      start={GLASS_BORDER_START}
      end={GLASS_BORDER_END}
      style={styles.countdownBoxBorder}>
      <View style={styles.countdownBox}>
        <Typography variant="xxs" color={HERO_TEXT_MUTED}>
          {label}
        </Typography>
        <Typography variant="m" weight="semiBold" color={HERO_TEXT}>
          {pad(value)}
        </Typography>
      </View>
    </LinearGradient>
  );
}