import React from 'react'
import AppCard, { AppCardProps } from './AppCard'
import BookmarksBar from './BookmarksBar'
import { Bookmark } from './Settings'

interface AppListProps {
  apps: AppCardProps[]
  bookmarks: Bookmark[]
  onBookmarkOpen: (b: Bookmark) => void
  onBookmarkRemove: (index: number) => void
}

const AppList: React.FC<AppListProps> = ({ apps, bookmarks, onBookmarkOpen, onBookmarkRemove }) => {
  return (
    <div className="app-list">
      <BookmarksBar bookmarks={bookmarks} onOpen={onBookmarkOpen} onRemove={onBookmarkRemove} />
      {apps.length === 0 ? (
        <div className="app-list-empty">
          <p>Нет приложений.</p>
          <p>Откройте настройки (шестерёнка) и добавьте сайты.</p>
        </div>
      ) : (
        apps.map((card, i) => (
          <AppCard
            key={i}
            name={card.name}
            imageUrl={card.imageUrl}
            url={card.url}
            useProxy={card.useProxy}
          />
        ))
      )}
    </div>
  )
}

export default AppList