
/**
 * DeviceFrame Component
 * 
 * Renders device-specific frames (desktop, tablet, mobile) for preview content
 */

import React from 'react';
import PropTypes from 'prop-types';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import { DESKTOP, TABLET, MOBILE } from '../constants';

const DeviceFrame = ({ device, children, className }) => {
  const getFrameClass = () => {
    switch (device) {
      case MOBILE:
        return 'device-frame device-frame-mobile';
      case TABLET:
        return 'device-frame device-frame-tablet';
      case DESKTOP:
      default:
        return 'device-frame device-frame-desktop';
    }
  };

  return (
    <CapRow useLegacy className={`unified-preview-frame ${className || ''}`}>
      <div className={getFrameClass()}>
        {/* Device chrome/decorations */}
        {device === DESKTOP && (
          <div className="device-chrome desktop-chrome">
            <div className="chrome-dots">
              <span className="dot dot-close" />
              <span className="dot dot-minimize" />
              <span className="dot dot-maximize" />
            </div>
            <div className="chrome-address-bar">
              <span className="address-text">preview</span>
            </div>
          </div>
        )}
        
        {device === TABLET && (
          <div className="device-chrome tablet-chrome">
            <div className="tablet-camera" />
          </div>
        )}
        
        {device === MOBILE && (
          <div className="device-chrome mobile-chrome">
            <div className="mobile-notch" />
          </div>
        )}

        {/* Content area */}
        <div className="device-content">
          {children}
        </div>

        {/* Device footer */}
        {device === TABLET && (
          <div className="device-footer tablet-footer">
            <div className="home-button" />
          </div>
        )}
        
        {device === MOBILE && (
          <div className="device-footer mobile-footer">
            <div className="home-indicator" />
          </div>
        )}
      </div>
    </CapRow>
  );
};

DeviceFrame.propTypes = {
  device: PropTypes.oneOf([DESKTOP, TABLET, MOBILE]).isRequired,
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
};

DeviceFrame.defaultProps = {
  className: '',
};

export default DeviceFrame;
