import Box from "@mui/material/Box";
import AvatarGroup from "@mui/material/AvatarGroup";
import Avatar from "@mui/material/Avatar";
import {Typography} from "@mui/material";
import React from "react";
import { ArticleMetaProps } from "../types/props";

export function ArticleMeta({
  article,
}: ArticleMetaProps ) {

  const authors = article.authors;

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'row',
        gap: 2,
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '16px',
      }}
    >
      <Box
        sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}
      >
        <AvatarGroup max={3}>
          {authors.map((author, index) => (
            <Avatar
              key={index}
              alt={author.name}
              src={(
                import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
                "/" +
                (author.avatar?.replace(/^\/+/, "") || "")
              )}
              sx={{ width: 24, height: 24 }}
            />
          ))}
        </AvatarGroup>
        <Typography variant="caption">
          {authors.map((author) => author.name).join(', ')}
        </Typography>
      </Box>
      <Typography variant="caption" color="text.secondary">
        {new Date(article.created_at).toLocaleString('en-US', {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
        })}
      </Typography>
    </Box>
  );
}
