import { ArticlePreview } from '../types'
import ButtonLink from './ButtonLink'

export default function ArticleCard({ articlePreview }: { articlePreview: ArticlePreview }) {
    return (
        <div style={{
            backgroundColor: 'var(--color-yellow)',
            borderRadius: '8px',
            color: 'var(--color-black)',
            fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
            fontSize: '14px',
            lineHeight: '20px',
            margin: '20px',
            padding: '1.25em',
            paddingBottom: '1em',
            flex: '0 1 30%',
            textAlign: 'left',
        }}>
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages8.alphacoders.com%2F438%2F438396.jpg&f=1&nofb=1&ipt=14796576c139b58db62d2d2098392ef2fbaee77911040f7c0d98ab65a69c4644&ipo=images" alt="Article preview" style={{
                borderRadius: '8px',
                width: '100%',
                height: 'auto',
                marginBottom: '10px',
                flexShrink: 0,
            }} />
            <div style={{ }}>
                <h2 style={{
                    fontSize: '25px',
                    fontWeight: '500',
                    lineHeight: '30px',
                    margin: '0',
                    padding: '0',
                    marginBottom: '10px',
                }}>{articlePreview.title}</h2>
                <p style={{
                    margin: '0',
                    padding: '0',
                    // limit the preview to 200 characters
                    overflow: 'hidden',
                    display: '-webkit-box',
                    WebkitLineClamp: 3,
                    lineClamp: 3,
                    WebkitBoxOrient: 'vertical',
                }}>{articlePreview.preview}</p>
                <div style={{ float: 'right', marginTop: '.5rem' }}><ButtonLink url={`/article/${articlePreview.id}`} color='secondary' text='Read more...'/></div>
            </div>
        </div>
    )
}