import * as React from 'react';
import type { PersonaProps } from '@fluentui/react-persona';
import {
  usePersonaBase_unstable,
  renderPersona_unstable,
} from '@fluentui/react-persona';
import { Avatar } from '@fluentui/react-avatar';
import { PresenceBadge } from '@fluentui/react-badge';

const CustomPersona = React.forwardRef<HTMLDivElement, PersonaProps>((props, ref) => {
  const {
    avatar,
    presence,
    presenceOnly = false,
    size = 'medium',
    textAlignment = 'start',
    textPosition = 'after',
    ...baseProps
  } = props;

  const state = usePersonaBase_unstable(baseProps, ref);

  state.root.className = ['custom-persona', state.root.className].filter(Boolean).join(' ');

  return renderPersona_unstable({
    ...state,
    presenceOnly,
    size,
    textAlignment,
    textPosition,
    components: {
      ...state.components,
      avatar: Avatar,
      presence: PresenceBadge,
    },
    avatar: !presenceOnly ? {
      // Custom avatar configuration
      ...avatar,
      name: props.name,
      badge: presence,
    } : undefined,
    presence: presenceOnly ? {
      // Custom presence configuration
      ...presence,
    } : undefined,
  });
});

export const Example: React.FC = () => {
  return (
    <div>
      <CustomPersona 
        name="John Doe" 
        secondaryText="Software Engineer"
        tertiaryText="Available"
      />
    </div>
  );
};