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

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

import type { ObservationCardProps } from './ObservationCard.types';

export function ObservationCard({
  title,
  description,
  date,
  badge,
  onPress,
  onEdit,
  onDelete,
  className,
}: ObservationCardProps) {
  const Container = onPress ? Pressable : View;

  return (
    <Container
      accessibilityRole={onPress ? 'button' : 'summary'}
      accessibilityLabel={title}
      onPress={onPress}
      className={cn(
        'gap-2 rounded-xl border border-border bg-content2 p-3',
        onPress && 'active:bg-content3',
        className,
      )}
    >
      <View className="flex-row items-center gap-2">
        <Text variant="subtitleMedium" tone="primary" className="flex-1">
          {title}
        </Text>
        {badge}
      </View>
      {description ? (
        <Text variant="bodyMedium" tone="default">
          {description}
        </Text>
      ) : null}
      <View className="flex-row items-center justify-between">
        {date ? (
          <Text variant="caption" tone="muted">
            {date}
          </Text>
        ) : (
          <View />
        )}
        <View className="flex-row gap-1">
          {onEdit ? (
            <IconButton
              icon="pencil"
              size="sm"
              variant="ghost"
              onPress={onEdit}
              accessibilityLabel="Editar observación"
            />
          ) : null}
          {onDelete ? (
            <IconButton
              icon="trash"
              size="sm"
              variant="ghost"
              iconClassName="text-danger"
              onPress={onDelete}
              accessibilityLabel="Eliminar observación"
            />
          ) : null}
        </View>
      </View>
    </Container>
  );
}