import type { FC } from 'react'
import { BottomDialog, p as P } from 'web-components'
import type { IdName } from '@packages/shared'

type VendorSnippetProduct = IdName

interface ProductListDialogProps {
  open: boolean
  onClose: () => void
  products: VendorSnippetProduct[]
}

export const ProductListDialog: FC<ProductListDialogProps> = ({
  open,
  onClose,
  products,
}) => {
  return (
    <BottomDialog open={open} onClose={onClose}>
      <div className="pt-4 pb-8">
        <P className="text-lg font-bold mb-4 text-slate-900 block">
          Products ({products.length})
        </P>
        <div className="overflow-auto" style={{ maxHeight: 400 }}>
          {products.map((product, index) => (
            <div
              key={product.id}
              className={`py-3 border-b border-slate-100 ${index === products.length - 1 ? 'border-b-0' : ''}`}
            >
              <P className="text-sm text-slate-800 font-medium">
                {product.name}
              </P>
            </div>
          ))}
        </div>
      </div>
    </BottomDialog>
  )
}