---
import { Icon } from 'astro-icon/components';
import type { Project } from '../config/data';

export interface Props {
  project: Project;
}

const { project } = Astro.props;
---

<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
  <div class="card-body p-6">
    <h2 class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100">
      {project.name}
    </h2>

    <p class="text-center break-words my-4 text-base-100">
      {project.description}
    </p>

    <div class="card-actions justify-end mt-4">
      <a
        href={project.link}
        target="_blank"
        rel="noopener noreferrer"
        class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
        aria-label={`Visit ${project.name}`}
      >
        <Icon name="mdi:link" class="text-lg" />
      </a>
    </div>
  </div>
</div>