import {
  AbsoluteFill,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";

export const SceneEnding: React.FC<{
  username: string;
  duration: number;
}> = ({ username, duration }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Optional: subtle fade-in
  const opacity = interpolate(frame, [0, fps * 0.5], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#000", // Pure black background
        position: "relative",
        fontFamily: "Arial, sans-serif",
        color: "#fff",
        justifyContent: "center",
        alignItems: "center",
        display: "flex",
        flexDirection: "column",
        textAlign: "center",
        opacity,
      }}
    >
      {/* Main Title */}
      <div
        style={{ fontSize: "80px", fontWeight: "bold", marginBottom: "20px" }}
      >
        MADE ON SUNO
      </div>

      {/* Username */}
      <div style={{ fontSize: "36px", opacity: 0.8 }}>@{username}</div>
    </AbsoluteFill>
  );
};