import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Rule } from "./rule";

interface ReviewProps {
  name: string;
  date: Date;
  content: string;
  sourceIcon: IconDefinition;
  sourceUrl: string;
  sourceName: string;
}

export const Review = (props: ReviewProps): JSX.Element => {
  const { name, date, content, sourceIcon, sourceUrl, sourceName } = props;
  return (
    <li className="mb-10 ms-6">
      <span className="absolute flex items-center justify-center w-6 h-6 bg-[--background] text-[--foreground] rounded-full -start-3">
        <FontAwesomeIcon icon={sourceIcon} />
      </span>
      <div className="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:bg-gray-700 dark:border-gray-600">
        <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">
          {date.toLocaleDateString("en-GB")}
        </time>
        <div className="text-md font-normal text-gray-500 dark:text-gray-300">
          Review from{" "}
          <a
            href={sourceUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="font-semibold text-[#abfcec] hover:underline"
          >
            {name}
          </a>{" "}
          via{" "}
          <span className="bg-gray-100 text-gray-800 text-xs font-normal me-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">
            {sourceName}
          </span>
          <Rule />
          <p className="text-sm">{content}</p>
        </div>
      </div>
    </li>
  );
};