import { JSXElement } from "solid-js";

import { EngagementIcon } from "../../Util/Icons";
import { Post } from "../../Util/api";

export default function EngagementButton({ post }: { post: Post }): JSXElement {
  return (
    <>
      <div class="flex p-1">
        <button
          class="btn btn-xs hover:border-primary rounded-base"
          aria-label="Show sign of engagement"
        >
          <EngagementIcon />
        </button>
        <span class="text-1xl countdown text-center pt-1.5 px-1.5">
          <p style={{ "--value": 46 }}>{post.votes}</p>
        </span>
      </div>
    </>
  );
}