import { Pressable } from 'react-native';

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

import type { TechnicalSheetButtonProps } from './TechnicalSheetButton.types';

/**
 * Botón compacto del header para abrir/cerrar la ficha técnica.
 * Versión NativeWind, sin React Native Paper.
 */
export function TechnicalSheetButton({
  onPress,
  expanded = false,
  label = 'Ficha técnica',
  className,
}: TechnicalSheetButtonProps) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ expanded }}
      onPress={onPress}
      className={cn(
        'flex-row items-center gap-2 self-end rounded-md bg-primary px-3 py-1.5 active:bg-primary-700',
        className,
      )}
    >
      <Text variant="subtitleMedium" className="text-primary-foreground">
        {label}
      </Text>
      <Icon
        name={expanded ? 'chevronUp' : 'chevronDown'}
        size={18}
        className="text-primary-foreground"
      />
    </Pressable>
  );
}