1  import { Box, Typography } from '@mui/material';
  2  import React, { ReactNode } from 'react';
  3  
  4  import { FormattedNumber } from '../../components/primitives/FormattedNumber';
  5  import { Row } from '../../components/primitives/Row';
  6  
  7  interface StakeActionBoxProps {
  8    title: ReactNode;
  9    value: string;
 10    valueUSD: string;
 11    children: ReactNode;
 12    bottomLineTitle: ReactNode;
 13    bottomLineComponent: ReactNode;
 14    cooldownAmount?: ReactNode;
 15    gradientBorder?: boolean;
 16    dataCy: string;
 17  }
 18  
 19  export const StakeActionBox = ({
 20    title,
 21    value,
 22    valueUSD,
 23    children,
 24    bottomLineTitle,
 25    bottomLineComponent,
 26    gradientBorder,
 27    dataCy,
 28    cooldownAmount,
 29  }: StakeActionBoxProps) => {
 30    return (
 31      <Box
 32        sx={(theme) => ({
 33          flex: 1,
 34          display: 'flex',
 35          borderRadius: '6px',
 36          border: `1px solid ${theme.palette.divider}`,
 37          position: 'relative',
 38          '&:after': {
 39            content: "''",
 40            borderRadius: '6px',
 41            position: 'absolute',
 42            top: -1,
 43            bottom: -1,
 44            left: -1,
 45            right: -1,
 46            background: gradientBorder ? theme.palette.gradients.aaveGradient : 'transparent',
 47          },
 48        })}
 49      >
 50        <Box
 51          sx={(theme) => ({
 52            flex: 1,
 53            p: 4,
 54            display: 'flex',
 55            alignItems: 'center',
 56            flexDirection: 'column',
 57            borderRadius: '6px',
 58            background: theme.palette.background.paper,
 59            position: 'relative',
 60            zIndex: 2,
 61          })}
 62          data-cy={dataCy}
 63        >
 64          <Box sx={{ mb: 6, display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
 65            <Typography mb={1} color="text.secondary">
 66              {title}
 67            </Typography>
 68  
 69            <FormattedNumber
 70              value={value}
 71              visibleDecimals={2}
 72              variant="secondary21"
 73              color={+value === 0 ? 'text.muted' : 'text.primary'}
 74              data-cy={`amountNative`}
 75            />
 76            <FormattedNumber
 77              value={valueUSD}
 78              symbol="USD"
 79              visibleDecimals={2}
 80              variant="secondary12"
 81              color={+valueUSD === 0 ? 'text.muted' : 'text.secondary'}
 82              symbolsColor={+valueUSD === 0 ? 'text.muted' : 'text.secondary'}
 83              data-cy={`amountUSD`}
 84            />
 85          </Box>
 86  
 87          <Box sx={{ width: '100%', mb: 2 }}>{children}</Box>
 88  
 89          <Row
 90            caption={bottomLineTitle}
 91            captionVariant="caption"
 92            captionColor="text.secondary"
 93            width="100%"
 94          >
 95            {bottomLineComponent}
 96          </Row>
 97          {cooldownAmount}
 98        </Box>
 99      </Box>
100    );
101  };