import React from 'react'
import {
  Bloom,
  DepthOfField,
  EffectComposer,
  Vignette,
} from '@react-three/postprocessing'

// TODO Explore drei/three own's EffectComposer
const Effects: React.FC = () => {
  return (
    <EffectComposer>
      <DepthOfField
        focusDistance={0}
        focalLength={0.55}
        bokehScale={1.25}
        width={window.innerWidth / 2}
        height={window.innerHeight / 2}
      />
      <Vignette eskil={false} offset={0.1} darkness={0.8} />
      <Bloom
        luminanceThreshold={0.7}
        luminanceSmoothing={0.5}
        height={300}
        opacity={2.2}
      />
    </EffectComposer>
  )
}

export default Effects
