Toast Card

import { Player } from "@remotion/player";

import ToastCard from "../ui/toast-card"; // Adjust path as necessary

export default function MyToastPlayer() {
  const toastProps = {
    title: "Update Available",
    message: "A new version of the software is ready to install.",
    backgroundColor: "oklch(0.7 0.15 250)", // A nice blue
    titleColor: "#FFFFFF",
    messageColor: "#F0F0F0",
    positionPreset: "top-right" as const,
    entryDurationInFrames: 30,
    visibleDurationInFrames: 180, // Show for 6 seconds at 30 FPS
    exitDurationInFrames: 30,
    width: "350px",
  };

  const totalDuration =
    toastProps.entryDurationInFrames +
    toastProps.visibleDurationInFrames +
    toastProps.exitDurationInFrames +
    60; // Extra 60 frames buffer

  return (
    <Player
      component={ToastCard}
      inputProps={toastProps}
      durationInFrames={totalDuration}
      compositionWidth={1280} // Typical video width
      compositionHeight={720} // Typical video height
      fps={30}
      style={{
        width: "100%",
        height: "100%",
        backgroundColor: "var(--background-alt)", // A slightly different background
      }}
      autoPlay
      controls
      loop
    />
  );
}

type PositionPreset =
  | "bottom-left"
  | "bottom-right"
  | "top-left"
  | "top-right"
  | "center";