import ButtonPatternPreview from "./ButtonPatternPreview";

const ButtonPatternSelector = ({ patterns, onSelectPattern }) => {
  const shouldShowProBadge = (pattern) => Boolean(pattern?.isPro);

  const getPatternAttributes = (pattern) => {
    if (pattern.attributes) return pattern.attributes;
    return {};
  };

  const getPatternHtml = (pattern) => {
    return pattern.html || "";
  };

  return (
    <div className="button-pattern-selector">
      {patterns.map((pattern) => {
        const patternAttrs = getPatternAttributes(pattern);
        const patternHtml = getPatternHtml(pattern);

        return (
          <div key={pattern.id} className="button-pattern-item">
            <div className="pattern-meta-row">
              <span className="pattern-id-label">{pattern.id.replace(/^preset-/, "")}</span>
              {shouldShowProBadge(pattern) && <span className="pattern-pro-badge">PRO</span>}
            </div>
            <div
              className="pattern-preview-wrapper"
              onClick={() => {
                onSelectPattern({ ...pattern, attributes: patternAttrs });
              }}
            >
              <ButtonPatternPreview attributes={patternAttrs} html={patternHtml} />
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default ButtonPatternSelector;
