import React from 'react';
import { CardMedia, Typography } from '@mui/material';
import { ArticleMeta } from "../ArticleMeta";
import { ArticleCardProps } from "../../types/props";
import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles";


export default function ArticleCardSize12({
  article,
  index,
  focusedCardIndex,
  onSelectArticle,
  onFocus,
  onBlur,
}: ArticleCardProps) {
  return (
    <StyledCard
      variant="outlined"
      onClick={() => onSelectArticle(article)}
      onFocus={() => onFocus(index)}
      onBlur={onBlur}
      tabIndex={0}
      className={focusedCardIndex === index ? 'Mui-focused' : ''}
    >
      <CardMedia
        component="img"
        alt={article.title}
        image={(
          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
          "/" +
          (article.img?.replace(/^\/+/, "") || "")
        )}
        sx={{
          aspectRatio: '16 / 9',
        }}
      />
      <StyledCardContent>
        <Typography gutterBottom variant="caption" component="div">
          {article.tag}
        </Typography>
        <Typography gutterBottom variant="h6" component="div">
          {article.title}
        </Typography>
        <StyledTypography variant="body2" color="text.secondary" gutterBottom>
          {article.description}
        </StyledTypography>
      </StyledCardContent>
      <ArticleMeta article={article} />
    </StyledCard>
  );
};
