import React, { useEffect } from "react";
import { Frame, useMotionValue } from "framer";
import { useTheme } from "framer-motion"; // Simulating theme detection, adjust to your setup
import PropTypes from "prop-types";

export function SpotifyEmbed({ playlistUrl, width, height }) {
  const backgroundColor = useMotionValue("#ffffff"); // Default for light mode
  const { theme } = useTheme(); // Assuming this detects the site's theme, e.g., "light" or "dark"

  // Update background based on theme
  useEffect(() => {
    if (theme === "dark") {
      backgroundColor.set("#181818"); // Dark background
    } else {
      backgroundColor.set("#ffffff"); // Light background
    }
  }, [theme, backgroundColor]);

  return (
    <Frame
      width={width}
      height={height}
      background={backgroundColor}
      radius={16}
      overflow="hidden"
      style={{
        boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
      }}
    >
      <iframe
        src={`https://open.spotify.com/embed/playlist/${playlistUrl}`}
        width="100%"
        height="100%"
        frameBorder="0"
        allow="encrypted-media"
        style={{
          border: "none",
          borderRadius: "16px",
        }}
      ></iframe>
    </Frame>
  );
}

SpotifyEmbed.defaultProps = {
  playlistUrl: "37i9dQZF1DXcBWIGoYBM5M", // Default Spotify playlist ID
  width: 300,
  height: 380,
};

SpotifyEmbed.propTypes = {
  playlistUrl: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
};