import React, { Fragment } from 'react';
import styled from 'styled-components';
import { Field } from 'redux-form';
import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import remcalc from 'remcalc';
import { Row, Col } from 'react-styled-flexboxgrid';
import titleCase from 'title-case';
import includes from 'lodash.includes';
import { H3, P, FormGroup, FormLabel, Toggle, H4, Select, Card } from 'joyent-ui-toolkit';
const Version = styled(Select)`
min-width: 100%;
width: ${remcalc(144)};
select {
margin: 0;
border-bottom-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
`;
const getImage = name => {
try {
return {
url: require(`@assets/${name}.svg`),
size: 42,
bottom: 0
};
} catch (e) {
return {
url: require('@assets/placeholder.svg'),
size: 36,
bottom: 6
};
}
};
export const Preview = ({ name, version, isVm }) => (
{isVm ? 'Hardware Virtual Machine' : 'Infrastructure Container'}
{name} - {version}