import React from 'react';
import { Pressable, Text, View } from 'react-native';
import { ArrowUpRight, Gem } from 'lucide-react-native';

import { outOfCreditsWidgetStyles as s } from './outOfCreditsWidgetStyles';
import { themedColor } from '../../theme';
import { palette } from '../../tokens';

export function OutOfCreditsWidget({ onViewPlans }: { onViewPlans?: () => void }) {
  return (
    <View accessibilityLabel="Out of credits" style={s.container}>
      <View style={s.header}>
        <Gem color={themedColor('#FF8A4C')} size={18} strokeWidth={2} />
        <Text style={s.headerText}>0 credits remaining</Text>
      </View>

      <View style={s.offer}>
        <Text style={s.title}>You&apos;re out of credits</Text>
        <Text style={s.subtitle}>
          Upgrade to a Premium plan to unlock instant credits and keep building with your agent.
        </Text>
        {onViewPlans ? (
          <Pressable
            accessibilityLabel="View all plans"
            accessibilityRole="button"
            onPress={onViewPlans}
            style={({ pressed }) => [s.button, pressed && s.buttonPressed]}
          >
            <Text style={[s.buttonText, { color: palette.white }]}>View all plans</Text>
            <ArrowUpRight color={palette.white} size={18} strokeWidth={2} />
          </Pressable>
        ) : null}
      </View>
    </View>
  );
}