/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import type { JSX } from "react";

interface ProjectProperties {
  name:        string;
  url:         string;
  source?:     string;
  description: string;
  type:        "Website" | "Bot" | "API" | "Game";
}

const Colours: { [key in ProjectProperties["type"]]: string } = {
  API: "bg-sky-100 text-sky-900 dark:bg-sky-900 dark:text-sky-100",
  Bot:
    "bg-purple-100 text-purple-900 dark:bg-purple-900 dark:text-purple-100",
  Game:    "bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-100",
  Website: "bg-amber-100 text-amber-900 dark:bg-amber-900 dark:text-amber-100",
};

/**
 * Renders the view for a project.
 * @param properties - The project to render.
 * @returns A JSX element.
 */
export const Project = (properties: ProjectProperties): JSX.Element => {
  const { name, url, source, description, type } = properties;
  return (
    <div className="p-6 mb-2 bg-[--foreground] text-[--background]
        border border-gray-200 rounded-lg shadow w-[50%] m-auto">
      <h2 className="mb-2 text-2xl font-bold tracking-tight">{name}</h2>
      <span
        className={`inline-flex items-center text-xsfont-medium px-2.5 py-0.5
              rounded-full ${Colours[type]}`}
      >
        {type}
      </span>
      <p className="mb-3 font-normal">
        {description}
      </p>
      <a
        className="inline-flex items-center px-3 py-2 text-sm
          font-medium text-center text-[--foreground] bg-[--background]
          rounded-lg focus:ring-4 focus:outline-none focus:ring-blue-300
          dark:focus:ring-blue-800"
        href={url}
        rel="noopener noreferrer"
        target="_blank"
      >
        {`See Project`}
        <svg
          aria-hidden="true"
          className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
          fill="none"
          viewBox="0 0 14 10"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1 5h12m0 0L9 1m4 4L9 9"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
          />
        </svg>
      </a>
      {source === undefined
        ? null
        : <a
          className="ml-1 inline-flex items-center px-3 py-2 text-sm
          font-medium text-center text-[--foreground] bg-[--background]
          rounded-lg focus:ring-4 focus:outline-none focus:ring-blue-300
          dark:focus:ring-blue-800"
          href={source}
          rel="noopener noreferrer"
          target="_blank"
        >
          {`View Source`}
          <svg
            aria-hidden="true"
            className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
            fill="none"
            viewBox="0 0 14 10"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M1 5h12m0 0L9 1m4 4L9 9"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
            />
          </svg>
        </a>
      }
    </div>
  );
};