import React from 'react';
import { View, ScrollView } from 'react-native';
import { BottomDialog, MyText, tw } from 'common-ui';

interface VendorSnippetProduct {
  id: number;
  name: string;
}

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

export const ProductListDialog: React.FC<ProductListDialogProps> = ({
  open,
  onClose,
  products,
}) => {
  return (
    <BottomDialog open={open} onClose={onClose}>
      <View style={tw`pt-4 pb-8`}>
        <MyText style={tw`text-lg font-bold mb-4 text-slate-900`}>
          Products ({products.length})
        </MyText>
        <ScrollView style={{ maxHeight: 400 }}>
          {products.map((product, index) => (
            <View
              key={product.id}
              style={[
                tw`py-3 border-b border-slate-100`,
                index === products.length - 1 && tw`border-b-0`,
              ]}
            >
              <MyText style={tw`text-sm text-slate-800 font-medium`}>
                {product.name}
              </MyText>
            </View>
          ))}
        </ScrollView>
      </View>
    </BottomDialog>
  );
};