import React from "react";
import Link from "next/link";
import { guaNumFromMark } from "@/lib/content/gua-utils";

export interface ResultObj {
  guaTitle: string;
  guaMark: string;
  guaResult: string;
  guaChange: string;
}

function Result(props: ResultObj) {
  const guaNum = guaNumFromMark(props.guaMark);
  return (
    <div className="flex flex-col items-start justify-center gap-2 sm:gap-3">
      {props.guaTitle}
      <Link
        className="group flex items-center gap-1 font-medium text-primary/80 underline underline-offset-4 transition-colors hover:text-primary/100"
        href={`/learn/${guaNum}`}
      >
        <div className="mt-1 h-[90%] w-1.5 bg-blue-400/80 transition-colors group-hover:bg-blue-400/100" />
        <span>{props.guaResult}</span>
      </Link>
      <span className="text-sm italic text-muted-foreground">
        {props.guaChange}
      </span>
    </div>
  );
}

export default Result;