import { faClock } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

type StatusItemProps = {
  statusInfoItem: string;
  description: string;
};

const StatusItemUTC = ({ statusInfoItem, description }: StatusItemProps) => {
  const humanReadable = (string: string) => {
    if (description.includes("UTC")) {
      const text = string.slice(0, statusInfoItem.length - 3);
      return text;
    }
  };

  return (
    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
      <div className="flex flex-row gap-2 items-center">
        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
          <FontAwesomeIcon icon={faClock} />
        </span>

        <p className="text-lg">{description.toLowerCase().includes("utc") && humanReadable(statusInfoItem)}</p>
      </div>

      <p className="text-slate-400">{description}</p>
    </div>
  );
};

export default StatusItemUTC;