import * as React from 'react';

import { Buttons } from '@/components/buttons';
import { Colors } from '@/components/colors';
import { Inputs } from '@/components/inputs';
import { Typography } from '@/components/typography';
import { FocusAwareStatusBar, SafeAreaView, ScrollView } from '@/components/ui';
import TopNavigation from '@/library/top-navigation';
import FilterChip from '@/library/FilterChip';
import { ImageBackground, View } from 'react-native';
import ToggleChip from '@/library/ToggleChip';
import BlurView from '@/library/BlurView';

export default function Style() {
  return (
    <>
      <TopNavigation backgroundColor="emerald-200" barStyle={'light-content'}>
        {/* <ImageBackground
          blurRadius={30}
          source={require('../../library/images/blurexample.png')}
          style={{
            // backgroundColor: 'rgba(0, 0, 0, 0.6)',
            zIndex: 9999,
          }}
          className="flex-1 absolute top-0 left-0 right-0 bottom-0"
        /> */}
        <BlurView backgroundColor={'rgba(255, 0, 0, 0.46)'} blurRadius={1} />
        <ScrollView className="px-4">
          <SafeAreaView className="flex-1 justify-center items-center gap-[10px]">
            {/* <Typography /> */}
            {/* <Colors /> */}
            {/* <Buttons /> */}
            {/* <Inputs /> */}
            <FilterChip
              // leftIcon={
              //   <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              // }
              // rightIcon={
              //   <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              // }
              label="🍔 패스트푸드"
              count={3}
              shape="round"
              variant="neutralLow"
              // size="medium"
            />
            <FilterChip
              // leftIcon={
              //   <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              // }
              // rightIcon={
              //   <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              // }
              label="🍔 패스트푸드"
              count={4}
              variant="outline"
            />
            <FilterChip
              // leftIcon={
              //   <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              // }
              // rightIcon={
              //   <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              // }
              label="🍔 패스트푸드"
              count={4}
              selected
            />
            <FilterChip
              // leftIcon={
              //   <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              // }
              // rightIcon={
              //   <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              // }
              label="🍔 패스트푸드"
              count={4}
              selected
              disabled
              shape="round"
              variant="neutralLow"
            />
            <ToggleChip
              label="토글"
              size="medium"
              shape="pill"
              // selected
              onPress={() => console.log('토글 클릭')}
            />
            <ToggleChip
              label="토글"
              size="medium"
              shape="pill"
              selected
              onPress={() => console.log('토글 클릭')}
            />
            <ToggleChip
              label="토글"
              size="medium"
              shape="round"
              variant="neutralLow"
              // selected
              onPress={() => console.log('토글 클릭')}
              leftIcon={
                <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              }
              rightIcon={
                <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              }
            />
            <ToggleChip
              label="토글"
              size="medium"
              shape="round"
              variant="neutralLow"
              disabled
              selected
              onPress={() => console.log('토글 클릭')}
              leftIcon={
                <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              }
              rightIcon={
                <View className="w-[16px] h-[16px] bg-red-500 rounded-full" />
              }
            />
          </SafeAreaView>
        </ScrollView>
      </TopNavigation>
    </>
  );
}