import React, { useState } from "react";
import { Button } from "components/Button/Button";
import {
  SVGFavoriteFilled,
  SVGFavoriteOutlined,
  SVGFolder,
} from "components/icons";

const subscriptionStyles = "fill-gray-500 stroke-gray-500 w-6";

type ArticleSubscriptionsButtonsProps = {
  className?: string;
  favorite?: boolean;
  //Todo create tracking subscriptions and onClick props
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;

export function ArticleSubscriptionsButtons({
  className,
  favorite = false,
}: ArticleSubscriptionsButtonsProps) {
  return (
    <div className="flex flex-row">
      <Button emphasis="low">
        <Button.Icon>
          <SVGFolder className={subscriptionStyles} />
        </Button.Icon>
      </Button>
      <Button emphasis="low" onClick={() => {}}>
        <Button.Icon>
          {!favorite ? (
            <SVGFavoriteOutlined className={subscriptionStyles} />
          ) : (
            <SVGFavoriteFilled className="fill-blue-600 stroke-blue-600 w-6" />
          )}
        </Button.Icon>
      </Button>
    </div>
  );
}