import { createThemedStyles } from '../../theme';

export const outOfCreditsWidgetStyles = createThemedStyles({
  container: {
    backgroundColor: '#0B0B0C',
    borderColor: '#2A2A2A',
    borderRadius: 12,
    borderWidth: 1,
    marginBottom: 8,
    maxWidth: 900,
    padding: 12,
    width: '100%',
  },
  header: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 6,
  },
  headerText: {
    color: '#F4F4F5',
    fontSize: 14,
    fontWeight: '700',
  },
  offer: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#3F3F46',
    borderRadius: 8,
    borderStyle: 'dashed',
    borderWidth: 1,
    gap: 4,
    marginTop: 12,
    padding: 16,
  },
  title: {
    color: '#F4F4F5',
    fontSize: 16,
    fontWeight: '700',
    textAlign: 'center',
  },
  subtitle: {
    color: '#A1A1AA',
    fontSize: 14,
    marginBottom: 12,
    textAlign: 'center',
  },
  button: {
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: '#FF5A1F',
    borderRadius: 8,
    flexDirection: 'row',
    gap: 6,
    justifyContent: 'center',
    minHeight: 40,
    paddingHorizontal: 16,
  },
  buttonPressed: { opacity: 0.84 },
  buttonText: {
    fontSize: 14,
    fontWeight: '700',
  },
});