import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import { Card } from "./ui/card";

type ScannedLabel = {
	label: string;
	date: Date;
};

type ScannedLabelBoxProps = {
	labels: ScannedLabel[];
	color: string | null;
	clearScan: () => void;
};

export function ScannedLabelBox({
	labels,
	color,
	clearScan,
}: ScannedLabelBoxProps) {
	return (
		<SafeAreaView className={`flex-1 w-full items-center ${color ?? ""}`}>
			<View className="flex flex-col gap-2">
				<Text style={{ fontSize: 18, fontWeight: "700", marginBottom: 8 }}>
					Current scanned labels
				</Text>
			</View>

			<ScrollView className="w-full flex-1">
				{labels.length === 0 ? (
					<Text className="text-center">
						pending new labels to be scanned...
					</Text>
				) : (
					<View className="flex items-center gap-2 w-full">
						{labels.map((i, index) => (
							<Card
								key={`${i.label}-${index}`}
								className={`p-2 border rounded items-center ${color ?? ""} w-full`}
							>
								<Text style={{ fontSize: 18, fontWeight: "700" }}>
									{i.label} - {i.date.toString()}
								</Text>
							</Card>
						))}
					</View>
				)}
			</ScrollView>
			{/* {labels.length !== 0 && (
				<Button onPress={clearScan} variant="secondary">
					<Text>Clear Scans</Text>
				</Button>
			)} */}
		</SafeAreaView>
	);
}
