import ListItem from '@design-system/List/components/ListItem';
import { IconChevronRight } from '@tabler/icons-react';

import useProfileUsersDrawer from '../useProfileUsersDrawer';

import { type ProfileListUsersRowProps } from './types';

const ProfileListUsersRow = ({ field, texts }: ProfileListUsersRowProps) => {
  const { openDrawer } = useProfileUsersDrawer(field, texts);

  return (
    <ListItem
      onClick={() => openDrawer()}
      text={{
        title: texts.collaborator_count,
        copetin: field.name,
      }}
      action={{ Icon: IconChevronRight, onClick: () => openDrawer() }}
      slotProps={{
        container: {
          sx: {
            p: 1,
            m: -1,
            borderRadius: 2,
            '& .MuiIconButton-root:hover': { background: 'transparent' },
          },
        },
      }}
    />
  );
};

export default ProfileListUsersRow;