import React from 'react';

const BlogPostCard = ({ 
  image = "https://dashboard.codeparrot.ai/api/image/Z5x57-xZjZ9DnCB5/image.png",
  title = "How collaboration makes us better designers",
  description = "Collaboration can make our teams stronger, and our individual designs better.",
  arrowIcon = "https://dashboard.codeparrot.ai/api/image/Z5x57-xZjZ9DnCB5/arrow-up.png",
  onClick = () => {}
}) => {
  const styles = {
    container: {
      width: '356px',
      display: 'flex',
      flexDirection: 'column',
      gap: '32px',
      cursor: 'pointer',
      transition: 'transform 0.2s ease',
    },
    image: {
      width: '356px',
      height: '240px',
      objectFit: 'cover',
    },
    content: {
      display: 'flex',
      flexDirection: 'column',
      gap: '24px',
    },
    headingContainer: {
      display: 'flex',
      flexDirection: 'column',
      gap: '12px',
    },
    titleRow: {
      display: 'flex',
      flexDirection: 'row',
      gap: '16px',
      justifyContent: 'space-between',
      alignItems: 'flex-start',
    },
    title: {
      flex: 1,
      fontSize: '24px',
      lineHeight: '32px',
      fontFamily: 'Inter, sans-serif',
      fontWeight: 600,
      color: '#16274f',
      margin: 0,
    },
    iconWrap: {
      padding: '4px 0 0 0',
    },
    icon: {
      width: '24px',
      height: '24px',
    },
    description: {
      fontSize: '16px',
      lineHeight: '24px',
      fontFamily: 'Inter, sans-serif',
      fontWeight: 400,
      color: '#4b5162',
      margin: 0,
    }
  };

  return (
    <div 
      style={styles.container} 
      onClick={onClick}
      onMouseOver={(e) => {e.currentTarget.style.transform = 'scale(1.02)'}}
      onMouseOut={(e) => {e.currentTarget.style.transform = 'scale(1)'}}
    >
      <img src={image} alt="" style={styles.image} />
      <div style={styles.content}>
        <div style={styles.headingContainer}>
          <div style={styles.titleRow}>
            <h2 style={styles.title}>{title}</h2>
            <div style={styles.iconWrap}>
              <img src={arrowIcon} alt="" style={styles.icon} />
            </div>
          </div>
          <p style={styles.description}>{description}</p>
        </div>
      </div>
    </div>
  );
};

export default BlogPostCard;

