import React from "react";
import { ArrowDown } from "../../icons/arrow";
import "./TOD.ThemeSelect.css";

const ThemeSelect = ({
  isOpen,
  onToggle,
  themes,
  selectedTheme,
  onThemeSelect,
}) => {
  return (
    <div className="theme-select-container">
      <div
        className={isOpen ? "theme-select-header open" : "theme-select-header"}
        onClick={onToggle}
      >
        <span>Select Section Style</span>
        <ArrowDown />
      </div>
      {isOpen && (
        <div className="theme-select-grid">
          {themes.map((theme) => (
            <div
              key={theme.id}
              className={`theme-select-option ${
                selectedTheme === theme.id ? "selected" : ""
              }`}
              onClick={() => {
                onThemeSelect(theme.id);
                setTimeout(onToggle, 300);
              }}
            >
              <div className="theme-select-image">
                {theme.imageUrl && (
                  <img src={theme.imageUrl} alt={theme.name} />
                )}
              </div>
              <span className="theme-select-text">{theme.name}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default ThemeSelect;
