import * as React from 'react';
import { Button } from '@tnsu/ui-kit';
import { IAssignedResource } from './resourcesTypes';
import { RESOURCES_TEXTS } from './texts';
import styles from './ResourcesPage.module.scss';

const TEXTS = RESOURCES_TEXTS.assigned;

interface Props {
  items: IAssignedResource[];
  onRemove: (itemId: number) => void;
}

/** Правая колонка «Привязаны к проекту». */
export const AssignedPanel: React.FC<Props> = ({ items, onRemove }) => (
  <div className={styles.panelColumn}>
    <div className={styles.panelTitle}>{TEXTS.title}</div>
    {items.length === 0 && <div className={styles.emptyMsg}>{TEXTS.empty}</div>}
    {items.map((item) => (
      <div key={item.id} className={styles.itemRow}>
        <span className={styles.itemName}>{item.title}</span>
        <Button
          variant="danger"
          size="sm"
          title={TEXTS.remove}
          aria-label={TEXTS.remove}
          onClick={() => onRemove(item.id)}
        >
          −
        </Button>
      </div>
    ))}
  </div>
);