import { Button } from '@/components/Button/Button'
import Link from 'next/link'
import styles from './styles.module.scss'
import Image, { StaticImageData } from 'next/image'

type BlogExcerptProps = {
  id: string,
  title: string,
  excerpt: string
  photo: StaticImageData | undefined
}

export const BlogExcerpt = ({id, title, excerpt, photo}: BlogExcerptProps) => {

  const url = `/blog/${id}`;

  return (
    <div className={styles.container}>
      <div>
        { photo &&
          <Link href={url}>
            <Image
              src={photo.src}
              width={photo.width}
              height={photo.height}
              alt={"Blogbild"}
              className={styles.image}
              unoptimized={true}
            />
          </Link>
        }
      </div>
      <div className={styles.content}>
        <h3><Link href={url} className={styles.title}>{title}</Link></h3>
        <p>{excerpt}</p>

        <div className={styles.button}>
          <Button size={"md"} href={url}>Weiter lesen</Button>
        </div>
      </div>
    </div>
  );
}