import { Pressable, View } from 'react-native';

import { Icon } from '../../atoms/Icon';
import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

import type { EntityCardProps } from './EntityCard.types';

/**
 * Tarjeta genérica para representar entidades agrícolas (fincas, bloques, naves, etc.).
 * Soporta icono opcional, slot derecho (chevron, estado) y badge.
 */
export function EntityCard({
  title,
  subtitle,
  description,
  icon,
  rightSlot,
  badge,
  onPress,
  onLongPress,
  disabled = false,
  selected = false,
  className,
  testID,
}: EntityCardProps) {
  const Container = onPress ? Pressable : View;

  return (
    <Container
      testID={testID}
      onPress={onPress}
      onLongPress={onLongPress}
      disabled={disabled}
      accessibilityRole={onPress ? 'button' : 'summary'}
      accessibilityLabel={title}
      accessibilityState={{ disabled, selected }}
      className={cn(
        'flex-row items-center gap-3 rounded-xl border border-border bg-card p-4 shadow-sm shadow-black/5',
        onPress && 'active:bg-content2',
        selected && 'border-primary bg-primary-50',
        disabled && 'opacity-50',
        className,
      )}
    >
      {icon ? (
        <View className="rounded-full bg-primary p-2">
          <Icon name={icon} size={20} className="text-primary-foreground" />
        </View>
      ) : null}
      <View className="flex-1 gap-0.5">
        <View className="flex-row items-center gap-2">
          <Text variant="subtitleMedium" className="flex-1 text-foreground">
            {title}
          </Text>
          {badge}
        </View>
        {subtitle ? (
          <Text variant="caption" tone="muted">
            {subtitle}
          </Text>
        ) : null}
        {description ? (
          <Text variant="bodyMedium" tone="muted" numberOfLines={2}>
            {description}
          </Text>
        ) : null}
      </View>
      {rightSlot}
    </Container>
  );
}