import React from 'react';
import { SilkeBox } from '../silke-box';
import { SilkeUploadField, FileModel } from '../silke-upload-field';
import { TabProps } from './utils';

export default function UploadTab({ icon, onSelect }: TabProps) {
  const value = icon?.type === 2 ? icon.value : undefined;
  return (
    <SilkeBox pad="m">
      <SilkeUploadField
        label="Upload image"
        autoFocus
        help="Upload jpg, png, gif or svg. Max file size is 512 KB."
        maxSize={512}
        accept="image/*"
        value={value as FileModel}
        onChange={(url: any) => onSelect(url ? { type: 2, value: { url: url as string } } : null)}
      />
    </SilkeBox>
  );
}