import { Button } from "../button";
import { MaterialIcon } from "../material-icon";
import { Text } from "../text";
import { ViewCartButtonProps } from "./types";

import { cx } from "@shared/utils";

const baseClasses =
  "btn-medium rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
export const ViewCartButton: React.FC<ViewCartButtonProps> = props => {
  const { cartTotalText, onClick, isOpen, ...rest } = props;
  return (
    <Button
      className={cx(
        baseClasses,
        "btn-small w-full border-border pl-6 pr-4 md:btn-medium"
      )}
      onClick={onClick}
      {...rest}
    >
      <div className="flex w-full items-center justify-center gap-2">
        <div className="flex flex-col items-center justify-center">
          <Text className="label4 -mb-1 text-text">View cart</Text>
          <Text className="label3 text-text md:label1" data-testid="cart-total">
            {cartTotalText}
          </Text>
        </div>
        <MaterialIcon
          name="keyboard_arrow_up"
          size={24}
          fill={0}
          className={cx(
            "h-6 w-6 transition-transform",
            isOpen ? "rotate-180" : "rotate-0"
          )}
        />
      </div>
    </Button>
  );
};

export type { ViewCartButtonProps } from "./types";