export const ProjectCard = function ProjectCard(props: ProjectProps) {
  return (
    <div
      class={`group space-y-1 rounded-md ${
        props.wip ? "border-2 border-dashed" : "cursor-pointer"
      } bg-[#45475a] px-3 py-2 m-10 shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105`}
      onClick={() => props.repo && open(props.repo, "_blank")}
    >
      <div class="flex items-center justify-between">
        <h2 class="text-lg text-white font-black uppercase">
          <a href={props.repo} target="_blank">
            {props.title}
          </a>
        </h2>
        <div class="bg-[#585b70] text-[#a6adc8] text-xs font-bold uppercase px-2.5 py-0.5 rounded-full">
          {props.repo && (
            <a
              class="hover:underline"
              href={props.repo}
              target="_blank"
              onClick={(e) => e.stopPropagation()}
            >
              Active
            </a>
          )}
          {!props.repo && !props.wip && <span>Dead</span>}
          {props.wip && <span>WIP</span>}
        </div>
      </div>
      <p class="whitespace-pre-wrap italic font-light text-lg text-[#a6adc8]">
        {props.summary}
      </p>
      <p class="whitespace-pre-wrap text-sm font-semibold text-[#a6adc8]">
        {props.tech}
      </p>
    </div>
  );
};

type ProjectProps = {
  title: string;
  repo?: string;
  summary: string;
  tech: string;
  wip?: boolean;
};