'use client'

import type { App } from '@/types/app'
import { useTranslation } from 'react-i18next'
import { APP_LIST_GRID_CLASS_NAME } from './constants'
import { StarredAppCard } from './starred-app-card'

type StarredAppListProps = {
  apps: App[]
  onRefresh?: () => void
  stepByStepTourCardTarget?: string
  stepByStepTourCardHighlightPart?: string
  stepByStepTourHighlightedCardCount?: number
}

function SectionDivider({ label }: { label: string }) {
  return (
    <div className="flex h-7 flex-col items-start px-8 pt-3">
      <div className="flex h-4 w-full items-center">
        <div className="system-xs-medium-uppercase text-text-tertiary uppercase">{label}</div>
      </div>
    </div>
  )
}

export function StarredAppList({
  apps,
  onRefresh,
  stepByStepTourCardTarget,
  stepByStepTourCardHighlightPart,
  stepByStepTourHighlightedCardCount = 0,
}: StarredAppListProps) {
  const { t } = useTranslation()

  if (apps.length === 0) return null

  return (
    <>
      <SectionDivider label={t(($) => $['studio.starred'], { ns: 'app' })} />
      <div className={APP_LIST_GRID_CLASS_NAME}>
        {apps.map((app, index) => (
          <StarredAppCard
            key={app.id}
            app={app}
            onRefresh={onRefresh}
            stepByStepTourCardTarget={index === 0 ? stepByStepTourCardTarget : undefined}
            stepByStepTourCardHighlightPart={
              index < stepByStepTourHighlightedCardCount
                ? stepByStepTourCardHighlightPart
                : undefined
            }
          />
        ))}
      </div>
      <SectionDivider label={t(($) => $['studio.allApps'], { ns: 'app' })} />
    </>
  )
}