import * as React from 'react';
import styles from './RequestGrid.module.scss';
import { Icon } from '@tnsu/ui-kit';
import { IRequestType } from '../../models/types';

interface IRequestGridProps {
  requests: IRequestType[];
  onSelect: (request: IRequestType) => void;
}

export const RequestGrid: React.FC<IRequestGridProps> = ({ requests, onSelect }) => {
  if (requests.length === 0) {
    return <p className={styles.empty}>В этой категории пока нет заявок.</p>;
  }

  return (
    <div className={styles.grid}>
      {requests.map((request) => (
        <button
          key={request.id}
          type="button"
          className={styles.tile}
          onClick={() => onSelect(request)}
        >
          <span className={styles.tileIcon}>
            <Icon name={request.icon} />
          </span>
          <span className={styles.tileBody}>
            <span className={styles.tileTitle}>{request.title}</span>
            {request.description && <span className={styles.tileDesc}>{request.description}</span>}
          </span>
          <span className={styles.tileArrow}>
            <Icon name="chevron-right" size="sm" />
          </span>
        </button>
      ))}
    </div>
  );
};