import type { DataSourceCredential } from '@/types/pipeline'
import * as React from 'react'
import Item from './item'

type ListProps = {
  currentCredentialId: string
  credentials: Array<DataSourceCredential>
  onCredentialChange: (credentialId: string) => void
}

const List = ({
  currentCredentialId,
  credentials,
  onCredentialChange,
}: ListProps) => {
  return (
    <div className="flex w-[280px] flex-col gap-y-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]">
      {
        credentials.map((credential) => {
          const isSelected = credential.id === currentCredentialId
          return (
            <Item
              key={credential.id}
              credential={credential}
              isSelected={isSelected}
              onCredentialChange={onCredentialChange}
            />
          )
        })
      }
    </div>
  )
}

export default React.memo(List)