import type { AppBskyFeedDefs } from "@atproto/api";

import { parseEmbedDescription } from "../lib/parseEmbedDescription.ts";
import { parseEmbedImage } from "../lib/parseEmbedImage.ts";
import { OEmbedTypes } from "../routes/getOEmbed.ts";
import { Layout } from "./Layout.tsx";

interface PostProps {
  post: AppBskyFeedDefs.PostView;
  url: string;
  appDomain: string;
}

export const Post = ({ post, url, appDomain }: PostProps) => {
  const image = parseEmbedImage(post);
  return (
    <Layout url={url}>
      <meta name="twitter:creator" content={`@${post.author.handle}`} />
      <meta
        property="og:description"
        content={parseEmbedDescription(post)}
      />
      <meta
        property="og:title"
        content={`${post.author.displayName} (@${post.author.handle})`}
      />

      {!(image === post.author.avatar) && (
        <meta name="twitter:card" content="summary_large_image" />
      )}

      {Array.isArray(image) ? (
        image.map((i) => (
          <meta property="og:image" content={i} key={i} />
        ))
      ) : (
        <meta property="og:image" content={image} />
      )}

      <link
        type="application/json+oembed"
        href={`https:/${appDomain}/oembed?type=${
          OEmbedTypes.Post
        }&replies=${post.replyCount}&reposts=${
          post.repostCount
        }&likes=${post.likeCount}&avatar=${encodeURIComponent(
          post.author.avatar ?? "",
        )}`}
      />
    </Layout>
  );
};
