import { Avatar, Box, Typography } from "@mui/material";

export default function Author({ author, publishedAt }) {
    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' }}
            >
                <Avatar
                    alt={author}
                    sx={{ width: 24, height: 24 }}
                >
                    {author.charAt(0).toUpperCase()}
                </Avatar>
                <Typography variant="caption">
                    {author}
                </Typography>
            </Box>
            <Typography variant="caption">
                {publishedAt}
            </Typography>
        </Box>
    );
}