import React from "react";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
import { Grid, GridRow, GridCol } from "@arc-ui/components/Grid";
import { type AvatarProps, Avatar } from "@arc-ui/components/Avatar";
import { Heading } from "@arc-ui/components/Heading";
import { Text } from "@arc-ui/components/Text";
import styles from "./Author.module.css";

export const Author: React.FC<AuthorProps> = ({
  name,
  title,
  avatar = {},
  ...props
}) => {
  const avatarSizes = ["s", "m", "l", "xl"];
  avatar.size = avatarSizes.includes(avatar.size || "") ? avatar.size : "m";

  const isLargeAvatar = avatar.size === "l" || avatar.size === "xl";

  return (
    <div {...filterAttrs(props)}>
      <Grid isFluid isGutterless>
        <GridRow align="center">
          <GridCol xs={isLargeAvatar ? 12 : "auto"}>
            <div className={isLargeAvatar ? styles.largeAvatar : undefined}>
              <Avatar {...avatar} />
            </div>
          </GridCol>
          <GridCol>
            <div
              className={`${!isLargeAvatar && styles.authorContent}`}
              data-testid="authorContent"
            >
              <Heading size="xs">{name}</Heading>
              <Text size="s">{title}</Text>
            </div>
          </GridCol>
        </GridRow>
      </Grid>
    </div>
  );
};

export interface AuthorProps {
  /**
   * Name of the Author.
   */
  name: string;
  /**
   * Job title of the Author.
   */
  title: string;
  /**
   * Optional Avatar for the Author.
   */
  avatar?: AvatarProps;
}