import './File.sass'
import { FileField } from '@kobalte/core/file-field'

export default () => {
  return (
    <>
      <FileField class="filefield" maxFiles={1} onFileAccept={(data) => console.log('data', data)} onFileReject={(data) => console.log('data', data)} onFileChange={(data) => console.log('data', data)}>
        <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
        <FileField.HiddenInput />
        <FileField.ItemList class="filefield__itemList">
          {() => (
            <FileField.Item class="filefield__item">
              <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
              <FileField.ItemName class="filefield__itemName" />
              <FileField.ItemSize class="filefield__itemSize" />
              <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger">Delete</FileField.ItemDeleteTrigger>
            </FileField.Item>
          )}
        </FileField.ItemList>
      </FileField>
    </>
  )
}