import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useTheme } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import { Model } from '../types';

type ModelCardProps = {
	id: string;
	name: string;
	description: string;
	deployment?: string;
	isSelected?: boolean;
	onSelect: (id: string) => void;
	model?: Model; // Optionales komplettes Model-Objekt
};

export default function ModelCard({
	id,
	name,
	description,
	isSelected = false,
	onSelect,
	model,
}: ModelCardProps) {
	const { colors } = useTheme();
	const deployment = model?.parameters?.deployment;

	return (
		<TouchableOpacity
			style={[
				styles.container,
				{
					backgroundColor: colors.card,
					borderColor: isSelected ? colors.primary : 'transparent',
				},
			]}
			onPress={() => onSelect(id)}
		>
			<View style={styles.iconContainer}>
				<Ionicons name="chatbubble-ellipses-outline" size={24} color={colors.primary} />
			</View>

			<View style={styles.contentContainer}>
				<Text style={[styles.name, { color: colors.text }]}>{name}</Text>
				<Text style={[styles.description, { color: colors.text + '80' }]} numberOfLines={2}>
					{description}
				</Text>

				{deployment && (
					<Text style={[styles.deployment, { color: colors.primary + 'CC' }]} numberOfLines={1}>
						{deployment}
					</Text>
				)}
			</View>

			{isSelected && (
				<View style={[styles.checkmark, { backgroundColor: colors.primary }]}>
					<Ionicons name="checkmark" size={16} color="#fff" />
				</View>
			)}
		</TouchableOpacity>
	);
}

const styles = StyleSheet.create({
	container: {
		flexDirection: 'row',
		alignItems: 'center',
		padding: 16,
		borderRadius: 12,
		marginBottom: 12,
		borderWidth: 2,
		shadowColor: '#000',
		shadowOffset: { width: 0, height: 1 },
		shadowOpacity: 0.05,
		shadowRadius: 2,
		elevation: 1,
	},
	iconContainer: {
		width: 48,
		height: 48,
		borderRadius: 24,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'rgba(0,0,0,0.05)',
	},
	contentContainer: {
		flex: 1,
		marginLeft: 16,
	},
	name: {
		fontSize: 16,
		fontWeight: '600',
		marginBottom: 4,
	},
	description: {
		fontSize: 14,
		lineHeight: 20,
		marginBottom: 4,
	},
	deployment: {
		fontSize: 12,
		fontWeight: '500',
	},
	checkmark: {
		width: 24,
		height: 24,
		borderRadius: 12,
		justifyContent: 'center',
		alignItems: 'center',
	},
});
