import { FC } from 'react';
import { Col, Container, Row, StyleSystemThemedProps } from 'components/layout';
import { Text, TextVariant, TextWeightVariant } from 'components/text';
import { ArrowRight } from 'icons';
import { Button } from 'components/button';
import { Chip } from 'components/chip';
import { Visible } from 'components/visible';
import { ColorName } from '@emotion/react';

export const Heading: FC<HeadingType> = ({
  onPress,
  badge,
  caption,
  action,
  title,
  isBack,
  titleVariant,
  titleColor,
  titleWeight,
  isAction,
  ...props
}) => {
  return (
    <Container justifyContent="center" minHeight={40} {...props}>
      <Row flexWrap="wrap" alignItems="center" justifyContent="space-between">
        <Row alignItems="center">
          <Col>
            <Text
              variant={titleVariant || 'heading'}
              color={titleColor || 'title'}
              weightVariant={titleWeight || 'bold'}
            >
              {title}
            </Text>
            <Visible if={!!caption}>
              <Text variant="caption">{caption}</Text>
            </Visible>
          </Col>
          <Visible if={!!badge}>
            <Chip
              ml="xs"
              colorVariant="transparent"
              title={badge}
              variant="outline"
              sizeVariant="extra-small"
            />
          </Visible>
        </Row>
        <Visible if={isAction}>
          <Row>
            {action || (
              <Button
                sizeVariant="small"
                titleColor="primary"
                title="View All"
                onPress={onPress}
                rightElement={<ArrowRight colorVariant="primary" />}
              />
            )}
          </Row>
        </Visible>
      </Row>
    </Container>
  );
};
type HeadingType = StyleSystemThemedProps & HeadingProps;
export interface HeadingProps {
  title: string;
  isBack?: boolean;
  caption?: string;
  isAction?: boolean;
  titleVariant?: TextVariant;
  titleColor?: ColorName;
  titleWeight?: TextWeightVariant;
  action?: JSX.Element;
  onPress?: () => void;
  badge?: string | number;
}