import React from 'react';
import './MobileSkin.scss';
import { MobileSkinProps } from './MobileSkinInterface';

const MobileSkin: React.FC<MobileSkinProps> = ({
  children,
  orientation = '',
  mobileHeight = 448,
  mobileWidth = 220,
}) => {
  const isPortrait = orientation === 'portrait';
  const containerHeight = isPortrait ? mobileHeight : mobileWidth;
  const containerWidth = isPortrait ? mobileWidth : mobileHeight;

  return (
    <div
      className={`ff-mobileskin-wrapper ${
        isPortrait ? 'portrait' : 'landscape'
      }`}
    >
      <div
        className="ff-mobileskin-container"
        style={{
          height: containerHeight + 16,
          width: containerWidth + 16,
        }}
      >
        <div
          className="ff-mobile-container"
          style={{
            width: containerWidth,
            height: containerHeight,
          }}
        >
          <div className="ff-mobile-image-container">
            {React.isValidElement(children) ? (
              children
            ) : (
              <img
                src={children as string}
                alt="Mobile content"
                style={{
                  width: isPortrait ? '100%' : `${mobileWidth * 2.1}px`,
                  height: isPortrait ? '100%' : `${mobileHeight * 0.5}px`,
                }}
              />
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default MobileSkin;