import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import { ChevronLeftIcon } from '@/icons';
import { ProjectInviteSchema } from '@/state/projectStore';

import InviteList from './InviteList';

const InviteListView = ({
  invites,
  onBackClick,
  onAcceptInvite,
  onRejectInvite,
}: {
  invites: ProjectInviteSchema[];
  onBackClick: () => void;
  onAcceptInvite: (inviteId: string) => void;
  onRejectInvite: (inviteId: string) => void;
}) => {
  return (
    <>
      <div className='flex flex-row items-center px-4 py-4'>
        <Button
          variant={ButtonVariant.Secondary}
          shape={ButtonShape.Pill}
          icon={<ChevronLeftIcon className='h-4 w-4' />}
          className='p-3'
          onClick={onBackClick}
        />
        <span className='ml-4 text-xl font-semibold'>
          Invites
          {invites.length > 0 ? (
            <>
              {' '}
              <span className='font-normal text-foreground-tertiary'>
                ({invites.length})
              </span>
            </>
          ) : null}
        </span>
      </div>
      <div className='overflow-y-auto px-4 py-4'>
        <InviteList
          invites={invites}
          onAcceptInvite={onAcceptInvite}
          onRejectInvite={onRejectInvite}
        />
      </div>
    </>
  );
};

export default InviteListView;