import { ThemedText } from '@/components/misc/themed-text';

import { ThemedView } from '@/components/misc/themed-view';

import { ScreenLayout } from '@/components/ui/ScreenLayout';

import { useAuth } from '@/context/AuthContext';

import { Card, CardHeader } from '@/components/ui/Cards'

import { Section, SectionHeader } from '@/components/ui/Sections'

import { useThemeColor } from '@/hooks/use-theme-color'

import { Spacing, BorderRadius } from '@/constants/theme'

import { Grid } from '@/components/ui/LayoutHelpers'

export default function Insights() {

  const { user } = useAuth();

  const backgroundColor = useThemeColor({}, 'background')

  const accentPurple = useThemeColor({}, 'accentPurple')

  return (

    <ScreenLayout userName={user.firstName}

      userAvatar={user.avatarURL}

      onNotificationPress={() => console.log('Notifications')}

      showNotificationBadge={true}>

      <ThemedView>

        <Section>

          <SectionHeader

            title="Tendências da Semana"

            info="Últimos 7 dias"

          />

          <Card variant="default" style={{ height: 200 }} />

        </Section>

        <Section>

          <SectionHeader title="Insights de Saúde" />

          <Grid gap={8}>

            <Card style={{ height: 150, backgroundColor: accentPurple }} />

            <Card style={{ height: 150, backgroundColor: 'powderblue' }} />

          </Grid>

        </Section>

      </ThemedView>

    </ScreenLayout>

  )

}