import { Inline, Link, Skeleton } from "@front10/base-elements";
import * as React from "react";
import { TwitterIcon } from "./TwitterIcon";

interface Props extends React.PropsWithChildren<{}> {
  isLoading?: boolean;
  link?: string;
}

export function TweetFooter({ children, link, isLoading }: Props) {
  return (
    <Inline
      gap={3}
      sx={{
        fontSize: "12px",
        fontWeight: "var(--font-weight-light)",
        color: "var(--color-gray-600)",
      }}
    >
      {isLoading ? <Skeleton width="12ch" /> : children}
      <Link
        href={link}
        target="_blank"
        sx={{
          textAlign: "right",
          flex: "1",
          fontSize: "14px",
          "&:hover .fr-twitter-icon": {
            fill: "var(--color-primary)",
            transition: "all 0.2s ease",
          },
        }}
      >
        <TwitterIcon aria-label="See on Twitter" />
      </Link>
    </Inline>
  );
}