import { useI18n } from "@solid-primitives/i18n";

import styles from './Project.module.css';
import type { Project } from './projectList';

export default (props: {project: Project}) => {
  const [t] = useI18n();

  return (
    <div class={styles.Project}>
      <img
        class={styles.preview}
        src={props.project.preview}
      />
      <div
        class={styles.body}
      >
        <a
          href={props.project.link}
          target="_blank"
        >
          <h2
            class={styles.name}
          >
            {props.project.name}
          </h2>
        </a>
        <div class={styles.description}>
          {t(props.project.descriptionSlug)}
        </div>
      </div>
    </div>
  )
}