import { usePhpMyAdminConnectionState } from "@/hooks/connection";
import { useMemo } from "react";

type Props = {
  title?: string;
};
export default function PmaLink(props: Props) {
  const { url, state } = usePhpMyAdminConnectionState();

  const classState = useMemo(() => {
    switch (state) {
      case "established":
        return "status-success";
      case "failed":
        return "status-error";
      case "checking":
        return "status-primary";
    }
  }, [state]);

  const statusClass = useMemo(() => `status ${classState}`, [classState]);

  return (
    <a href={url} target="_blank" rel="noopener noreferrer">
      <div className={statusClass}></div>
      {props.title ?? "phpMyAdmin"}
    </a>
  );
}