/**
 * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
 * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
 */

import { Theme as NavigationTheme } from '@react-navigation/native';
import { Platform } from 'react-native';

export interface AppTheme extends NavigationTheme {
  colors: NavigationTheme['colors'] & {
    secondary: string;
  };
}

export const Fonts = {
  sans: Platform.select({
    ios: 'SF Pro Text',
    android: 'Roboto',
    web: "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial",
    default: 'sans-serif',
  }),
  serif: Platform.select({
    ios: 'New York',
    android: 'serif',
    web: "Georgia, 'Times New Roman', serif",
    default: 'serif',
  }),
  rounded: Platform.select({
    ios: 'SF Pro Rounded',
    android: 'sans-serif-medium',
    web: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', sans-serif",
    default: 'sans-serif',
  }),
  mono: Platform.select({
    ios: 'SF Mono',
    android: 'monospace',
    web: "SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace",
    default: 'monospace',
  }),
};

const DarkTheme: AppTheme = {
  dark: true,
  colors: {
    primary: '#7289DA',
    secondary: '#4f535c',
    background: '#363940',
    card: '#212226',
    text: '#FFFFFF',
    border: '#202225',
    notification: '#ED4245',
  }
};

const LightTheme: AppTheme = {
  dark: false,
  colors: {
    primary: '#7289DA',
    secondary: '#A0A5AD',
    background: '#FDFDFD',
    card: '#E6E8EB',
    text: '#1C1E21',
    border: '#E0E0E0',
    notification: '#FF4D4F',
  },
};

export const Themes = { light: LightTheme, dark: DarkTheme }