import ProportionBar from "../../progress/ProportionBar";
import Button from "../../buttons/Button";
import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
import {
  CREATE_FLOW_FOOTER_SCRIM_CLASS,
  CREATE_FLOW_PAGE_GUTTER_CLASS,
  CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
} from "../../../(app)/create/components/createFlowLayoutTokens";

export function CreateFlowFooterView({
  secondButton,
  progressBar = true,
  proportionBarProgress = "1-0",
  proportionBarVariant: proportionBarVariantProp,
  onBackClick,
  className = "",
  contentMaxClass = CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
  footerAriaLabel,
}: CreateFlowFooterProps) {
  const proportionBarVariant = proportionBarVariantProp ?? "default";
  return (
    <footer
      className={`relative bg-black w-full pb-[env(safe-area-inset-bottom,0px)] ${className}`}
      role="contentinfo"
      aria-label={footerAriaLabel}
    >
      <div className={CREATE_FLOW_FOOTER_SCRIM_CLASS} aria-hidden />
      <div className={CREATE_FLOW_PAGE_GUTTER_CLASS}>
        <div className={`mx-auto w-full ${contentMaxClass}`}>
          {progressBar && (
            <div className="pt-[var(--spacing-measures-spacing-300,12px)]">
              <ProportionBar
                progress={proportionBarProgress}
                variant={proportionBarVariant}
              />
            </div>
          )}

          <div className="flex items-center justify-between py-[var(--spacing-measures-spacing-300,12px)] gap-[var(--spacing-measures-spacing-300,12px)]">
            <Button
              buttonType="ghost"
              palette="default"
              size="xsmall"
              className="!text-x-small-label md:!text-small-label !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
              onClick={onBackClick}
              disabled={!onBackClick}
            >
              Back
            </Button>

            {secondButton && <div className="flex-shrink-0">{secondButton}</div>}
          </div>
        </div>
      </div>
    </footer>
  );
}