import { AssociationFragment } from "@/gql/graphql";
import styles from "./associationItem.module.scss";
import Link from "next/link";
import { Image } from "@/components/general/Image";

export const AssociationItem = ({
  association,
}: {
  association: AssociationFragment;
}) => {
  return (
    <li className={`${styles.associationItem} linkItem`}>
      {association.logo && (
        <div className={styles.image}>
          <Image
            src={association.logo.url}
            alt={`Logoen til ${association.title}`}
            width={0}
            height={0}
            sizes="20vw"
          />
        </div>
      )}
      <div className={styles.text}>
        <h1 className={styles.title}>{association.title}</h1>
        {association.excerpt && (
          <p className={styles.excerpt}>{association.excerpt}</p>
        )}
      </div>
      <Link href={`/foreninger/${association.slug}`} className="hiddenLink">
        Mer om {association.title}
      </Link>
    </li>
  );
};
