/**
 * DeviceFrame - Clean device outline component
 */

import React from 'react';
import PropTypes from 'prop-types';
import { DEVICE_TYPES } from '../../constants';
import androidFrame from '../../../../assets/Android.png';
import iosFrame from '../../../../assets/iOS.png';

const DeviceFrame = ({
  device = DEVICE_TYPES.ANDROID,
  children,
  className = '',
  ...props
}) => {
  const getFrameAsset = () => device === DEVICE_TYPES.IOS ? iosFrame : androidFrame;

  const getFrameStyles = () => {
    const baseStyles = {
      position: 'relative',
      display: 'inline-block',
      backgroundImage: `url(${getFrameAsset()})`,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundSize: 'contain',
    };

    // Unified dimensions - both devices use the same size since assets are identical
    return {
      ...baseStyles,
      width: '450px',
      height: '920px',
    };
  };


  return (
    <div
      className={`device-frame device-frame--${device.toLowerCase()} ${className}`}
      style={getFrameStyles()}
      {...props}
    >

      {children}

    </div>
  );
};

DeviceFrame.propTypes = {
  device: PropTypes.oneOf(Object.values(DEVICE_TYPES)),
  children: PropTypes.node,
  className: PropTypes.string,
};

export default DeviceFrame;
