import '../styles/cardBlogs.css'

type BlogCardProps = {
  backgroundLink: string
}

export const BlogCard = ({ backgroundLink }: BlogCardProps) => {
  return (
    <a className='cardBlogMainWrapperLink' href='blog-inner.html'>
      <div
        className='cardBlogMain'
        style={{
          background: `url("${backgroundLink}") center / cover no-repeat`
        }}
      >
        <div
          className='cardBlogMainInside'
          style={{
            background:
              'linear-gradient( rgba(255, 255, 255, 0) 0%, #232323 100%)'
          }}
        >
          <h3
            style={{
              display: '-webkit-box',
              WebkitBoxOrient: 'vertical',
              overflow: 'hidden',
              WebkitLineClamp: 2,
              fontSize: '20px',
              lineHeight: 1.5,
              color: 'rgba(255, 255, 255, 0.75)',
              textShadow: '0 0 8px rgba(0, 0, 0, 0.25)'
            }}
          >
            This is a blog title, the best blog title in the world!
          </h3>
        </div>
      </div>{' '}
    </a>
  )
}