import { LuLink } from "@preact-icons/lu";

interface Project {
  id: string;
  name: string;
  description: string;
  link: string;
}

export default function ProjectCard(props: { project: Project }) {
  const { project } = props;
  return (
    <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-secondary text-accent"
            aria-label={`Visit ${project.name}`}
          >
            <LuLink class="text-lg" />
          </a>
        </div>
      </div>
    </div>
  );
}