import { type ReactNode } from 'react';
import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

import { Breadcrumbs } from '../Breadcrumbs';

interface ScreenHeaderProps {
  title: string;
  rightAction?: ReactNode;
  leftAction?: ReactNode;
  breadcrumbs?: string[];
  className?: string;
}

export function ScreenHeader({
  title,
  rightAction,
  leftAction,
  breadcrumbs,
  className,
}: ScreenHeaderProps) {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{ paddingTop: insets.top + 6 }}
      className={cn('w-full bg-primary px-4 pb-10', className)}
    >
      <View className="h-10 flex-row items-center justify-between">
        <View className="w-12 items-start">{leftAction}</View>
        <Text
          variant="subtitleLarge"
          className="flex-1 text-center font-semibold text-primary-foreground"
          numberOfLines={1}
          accessibilityRole="header"
        >
          {title}
        </Text>
        <View className="w-12 items-end">{rightAction}</View>
      </View>
      {breadcrumbs && breadcrumbs.length > 0 ? (
        <View className="mt-1">
          <Breadcrumbs items={breadcrumbs} textClassName="text-primary-foreground/80" />
        </View>
      ) : null}
    </View>
  );
}