import React, { forwardRef } from "react";

import { Button } from "../button/Button";
import { IconButton } from "../iconButton/IconButton";
import { Typography } from "../typography/Typography";

export interface SnackbarProps {
  onClose: () => void;
  progress?: number;
  children: string;
  actionText?: string;
  onAction?: () => void;
}

export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
  ({ children, onClose, progress, actionText, onAction }, ref) => (
    <div
      className="relative inline-flex items-center justify-between gap-16 overflow-y-hidden rounded-8 bg-N700 p-8 pl-16 text-N0 shadow-S300"
      ref={ref}
    >
      {progress && progress > 0 ? (
        <div
          className="absolute left-0 top-0 h-[3px] rounded-full bg-N100"
          style={{ width: `${progress}%` }}
        />
      ) : null}
      <Typography color="main" mode="dark">
        {children}
      </Typography>
      <div className="flex items-center gap-4">
        {actionText && (
          <Button variant="primary" onClick={onAction} size="default">
            {actionText}
          </Button>
        )}
        <IconButton
          name="xmark"
          weight="medium"
          onClick={onClose}
          aria-label="Sluiten"
          ESCAPE_className="text-N60 hover:bg-N600 hover:text-N0"
        />
      </div>
    </div>
  )
);

Snackbar.displayName = "Snackbar";
