import React from 'react'
import { useState } from 'react'
import { VideoList } from './components/VideoList'
import { VideoModal } from './components/VideoModal'

const App: React.FC = () => {
  const [selected, setSelected] = useState<string | null>(null)

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <div className="px-6 py-5">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Video Library</h1>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Browse and manage your video recordings</p>
        </div>
      </div>
      <div className="px-6 py-6">
        <VideoList onSelect={(id) => setSelected(id)} />
        <VideoModal fileId={selected} onClose={() => setSelected(null)} />
      </div>
    </div>
  )
}

export default App