import { FC } from 'react';
import { Button, Card, Col, Container, Divider, Row, Switch, Text } from 'components';
import { EmployeeGuest, EmployeeMember, SubscriptionLevel1 } from 'icons';

export const SubscriptionsPayments: FC = () => {
  return (
    <Container mx="l" pt="xs">
      <Text mb="m" variant="title">
        Subscriptions and Payments
      </Text>
      <Card variant="plain" colorVariant="base-01" p="l">
        <Row justifyContent="space-between">
          <Col justifyContent="center">
            <Row>
              <SubscriptionLevel1 />
              <Col ml="m" justifyContent="center">
                <Text variant="title">Starter</Text>
                <Text variant="title">
                  $12 <Text variant="caption">/ month</Text>
                </Text>
              </Col>
            </Row>
            <Button mt="m" sizeVariant="medium" colorVariant="primary" title={'Manage Payouts'} />
          </Col>
          <Col justifyContent="space-between">
            <Row flexGrow={1} alignItems="center">
              <Text variant="title">Monthly</Text>
              <Container px="2xs">
                <Switch circleSize={15} />
              </Container>
              <Text variant="body">Annual</Text>
            </Row>
            <Button
              sizeVariant="medium"
              variant="outline"
              colorVariant="primary"
              title={'Manage Payouts'}
              titleColor="primary"
            />
          </Col>
        </Row>
        <Divider my="l" colorVariant="divider-01" />

        <Row justifyContent="space-between">
          <Row>
            <EmployeeMember />
            <Col ml="m" justifyContent="center">
              <Text variant="title">12 344</Text>
              <Text variant="caption">total full members</Text>
            </Col>
          </Row>

          <Row>
            <EmployeeGuest />
            <Col ml="m" justifyContent="center">
              <Text variant="title">1 44</Text>
              <Text variant="caption">total guest members</Text>
            </Col>
          </Row>
        </Row>
      </Card>
    </Container>
  );
};