import { Button } from '@cherrystudio/ui'
import { Plus } from 'lucide-react'
import type React from 'react'
import { useTranslation } from 'react-i18next'

import { modelListClasses } from '../primitives/ProviderSettingsPrimitives'
import { useOvmsModelDownloadAction } from './useOvmsModelDownloadAction'

interface ProviderModelDownloadProps {
  providerId: string
  disabled: boolean
}

const ProviderModelDownload: React.FC<ProviderModelDownloadProps> = ({ providerId, disabled }) => {
  const { t } = useTranslation()
  const { openOvmsModelDownload } = useOvmsModelDownloadAction(providerId)

  return (
    <Button
      type="button"
      variant="outline"
      size="icon-sm"
      className={modelListClasses.addModelIconButton}
      disabled={disabled}
      aria-label={t('button.download')}
      onClick={openOvmsModelDownload}>
      <Plus className={modelListClasses.toolbarDesignIcon} />
    </Button>
  )
}

export default ProviderModelDownload
