import {View} from 'react-native'

import {atoms as a, useTheme} from '#/alf'

export function Palette() {
  const t = useTheme()
  return (
    <View style={[a.gap_md]}>
      <View style={[a.flex_row, a.gap_md]}>
        <View style={[a.flex_1, t.atoms.bg_contrast_25, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_50, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_100, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_200, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_300, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_400, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_500, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_600, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_700, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_800, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_900, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_950, {height: 60}]} />
        <View style={[a.flex_1, t.atoms.bg_contrast_975, {height: 60}]} />
      </View>

      <View style={[a.flex_row, a.gap_md]}>
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_25},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_50},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_100},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_200},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_300},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_400},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_500},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_600},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_700},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_800},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_900},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_950},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.primary_975},
          ]}
        />
      </View>
      <View style={[a.flex_row, a.gap_md]}>
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_25},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_50},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_100},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_200},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_300},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_400},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_500},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_600},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_700},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_800},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_900},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_950},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.positive_975},
          ]}
        />
      </View>
      <View style={[a.flex_row, a.gap_md]}>
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_25},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_50},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_100},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_200},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_300},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_400},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_500},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_600},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_700},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_800},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_900},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_950},
          ]}
        />
        <View
          style={[
            a.flex_1,
            {height: 60, backgroundColor: t.palette.negative_975},
          ]}
        />
      </View>
    </View>
  )
}