import { useState } from 'react';
import {
  BottomSheet,
  BottomSheetContent,
  BottomSheetHandle,
  BottomSheetHeader,
  BottomSheetTitle,
  BottomSheetFooter,
} from '~/components/ui/bottom-sheet';
import { Button } from '~/components/ui/button';
import { Text } from '~/components/ui/text';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <BottomSheet open={open} onOpenChange={setOpen}>
      <Button onPress={() => setOpen(true)}>
        <Text>Open Sheet</Text>
      </Button>
      <BottomSheetContent>
        <BottomSheetHandle />
        <BottomSheetHeader>
          <BottomSheetTitle>Sheet Title</BottomSheetTitle>
        </BottomSheetHeader>
        <BottomSheetFooter>
          <Button onPress={() => setOpen(false)}>
            <Text>Close</Text>
          </Button>
        </BottomSheetFooter>
      </BottomSheetContent>
    </BottomSheet>
  );
}