import React from "react";
import { SVGMedicine } from "../icons";
import Typography from "components/typography/Typography";
import { Button } from "components/Button/Button";
import classNames from "classnames";
import { JsxElement } from "typescript";

type Props = {
  count?: number;
  title: string;

  iconChild: Required<JSX.Element>;
} & Omit<React.ComponentPropsWithoutRef<"div">, "">;

function CategoryCard({ count, title, iconChild, className, ...props }: Props) {
  const iconChildStyle =
    "h-7 fill-gray-500 stroke-gray-500 group-focus:fill-blue-600 group-active:fill-blue-600 group-focus:stroke-blue-600 group-active:stroke-blue-600";

  return (
    <div className="snap-start">
      <Button
        defaultStyle={false}
        className="focus:outline-none group hover:bg-gray-75 active:bg-white active:outline active:outline-1 active:outline-blue-600 focus:outline-1 focus:outline-blue-600"
      >
        <div className=" rounded py-1 px-4 flex flex-row items-center ">
          <div className="justify-center max-w-max">
            {React.cloneElement(iconChild, {
              className: classNames(iconChildStyle, className),
            })}
          </div>
          <div className="flex flex-col ml-3 min-w-max">
            <div className="">
              <Typography
                fontWeightVariant="bold"
                className="text-sm leading-6 min-w-max group-active:text-blue-600 group-focus:text-blue-600"
              >
                {title}
              </Typography>
            </div>
            <div className="max-w-max ">
              <Typography
                fontWeightVariant="normal"
                className="text-xs text-gray-500 group-active:text-blue-600 group-focus:text-blue-600"
              >
                {count} Items
              </Typography>
            </div>
          </div>
        </div>
      </Button>
    </div>
  );
}

export default CategoryCard;