import React from 'react';
import { Card } from 'components/card';
import { useTheme } from 'hooks/useTheme';
import { Col, Row, StyleSystemThemedProps } from 'components/layout';
import { Docs } from 'icons';
import { Text, Button } from 'components';
import { useTranslation } from 'react-i18next';

export const LearnDocs: React.FC<StyleSystemThemedProps> = ({ ...props }) => {
  const { activeThemeMode } = useTheme();
  const { t } = useTranslation();
  const buttonText = t('button.explore-guide');
  const backgroundColor = activeThemeMode === 'dark' ? 'base-01' : 'grey-07';
  return (
    <Card variant="plain" sizeVariant="small" backgroundColor={backgroundColor} {...props}>
      <Row>
        <Col flexBasis="30%" alignItems="center" justifyContent="center">
          <Docs height={100} width="100%" />
        </Col>
        <Col flexBasis="68%" ml="s">
          <Text flexShrink={1} variant="title" color="white">
            {t('dashboard.learn-docs.title')}
          </Text>
          <Text flexShrink={1} variant="body" mt="xs">
            {t('dashboard.learn-docs.body')}
          </Text>
          <Button
            alignSelf="flex-start"
            mt="xs"
            colorVariant="primary"
            titleColor="white"
            sizeVariant="medium"
            title={buttonText}
          />
        </Col>
      </Row>
    </Card>
  );
};