import { StyleSheet } from 'react-native';
import { createThemedStyles } from '../../theme';

export const renameAgentModalStyles = createThemedStyles({
  actions: {
    flexDirection: 'row',
    gap: 10,
    marginTop: 18,
  },
  backdrop: {
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.58)',
    flex: 1,
    justifyContent: 'center',
    padding: 22,
  },
  button: {
    alignItems: 'center',
    borderRadius: 16,
    flex: 1,
    height: 48,
    justifyContent: 'center',
  },
  card: {
    backgroundColor: '#171717',
    borderColor: '#2C2C2E',
    borderRadius: 24,
    borderWidth: 1,
    padding: 18,
    width: '100%',
  },
  error: {
    color: '#FF6B6B',
    fontSize: 13,
    lineHeight: 18,
    marginTop: 10,
  },
  input: {
    backgroundColor: '#0B0B0C',
    borderColor: '#3A3A3C',
    borderRadius: 16,
    borderWidth: 1,
    color: '#F7F7F7',
    fontSize: 17,
    fontWeight: '600',
    height: 52,
    marginTop: 16,
    paddingHorizontal: 14,
  },
  pressed: {
    opacity: 0.76,
  },
  primaryButton: {
    backgroundColor: '#F4F4F5',
  },
  primaryButtonText: {
    // #111111 maps to white in light mode (dark button) and stays dark in dark
    // mode (light button), matching the primaryButton surface inversion.
    color: '#111111',
    fontSize: 16,
    fontWeight: '800',
  },
  primaryPressed: {
    opacity: 0.82,
  },
  secondaryButton: {
    backgroundColor: '#2C2C2E',
  },
  secondaryButtonText: {
    color: '#F7F7F7',
    fontSize: 16,
    fontWeight: '700',
  },
  title: {
    color: '#F7F7F7',
    fontSize: 20,
    fontWeight: '800',
    textAlign: 'center',
  },
});