import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorDemo() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='body'>Above separator</Text>
      <Separator style={{ marginVertical: 16 }} />
      <Text variant='body'>Below separator</Text>
    </View>
  );
}

import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorDemo() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='body'>Above separator</Text>
      <Separator style={{ marginVertical: 16 }} />
      <Text variant='body'>Below separator</Text>
    </View>
  );
}

import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorVertical() {
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16,
        height: 60,
      }}
    >
      <Text variant='body'>Left content</Text>
      <Separator orientation='vertical' style={{ marginHorizontal: 16 }} />
      <Text variant='body'>Right content</Text>
    </View>
  );
}

import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorThickness() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='caption' style={{ marginBottom: 8 }}>
        Thin (1px)
      </Text>
      <Separator style={{ height: 1, marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Medium (2px)
      </Text>
      <Separator style={{ height: 2, marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Thick (4px)
      </Text>
      <Separator style={{ height: 4, marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Extra thick (8px)
      </Text>
      <Separator style={{ height: 8 }} />
    </View>
  );
}

import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorColors() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='caption' style={{ marginBottom: 8 }}>
        Default
      </Text>
      <Separator style={{ marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Red
      </Text>
      <Separator style={{ backgroundColor: '#ef4444', marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Blue
      </Text>
      <Separator style={{ backgroundColor: '#3b82f6', marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Green
      </Text>
      <Separator style={{ backgroundColor: '#10b981', marginBottom: 16 }} />

      <Text variant='caption' style={{ marginBottom: 8 }}>
        Semi-transparent
      </Text>
      <Separator style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }} />
    </View>
  );
}

import { Separator } from '@/components/ui/separator';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React from 'react';

export function SeparatorSpacing() {
  return (
    <View style={{ padding: 16 }}>
      <Text variant='body'>Tight spacing</Text>
      <Separator style={{ marginVertical: 4 }} />
      <Text variant='body'>Content with minimal spacing</Text>

      <Separator style={{ marginVertical: 12 }} />

      <Text variant='body'>Normal spacing</Text>
      <Separator style={{ marginVertical: 16 }} />
      <Text variant='body'>Standard content spacing</Text>

      <Separator style={{ marginVertical: 12 }} />

      <Text variant='body'>Loose spacing</Text>
      <Separator style={{ marginVertical: 24 }} />
      <Text variant='body'>Generous content spacing</Text>
    </View>
  );
}