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


export default function ArticleCardSize2({
  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' : ''}
    >
      <StyledCardContent
        sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          height: '100%',
        }}
      >
        <div>
          <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>
        </div>
      </StyledCardContent>
      <ArticleMeta article={article} />
    </StyledCard>
  );
};
