import React, { ReactNode } from 'react';
import Link from 'next/link';
import GoBackArrow from '../../icons/GoBackArrow';
import { Ring } from '../../../model/rings';

interface PhaseHeaderProps {
  onDark?: boolean;
  ring: Ring;
  icon: ReactNode;
  phase: string;
}

const PhaseHeader: React.FC<PhaseHeaderProps> = ({
  onDark,
  ring,
  icon,
  phase,
}) => (
  <article className={`phaseHeader${onDark ? ' onDark' : ''}`}>
    <Link href={`/ring/${ring.id}`}>
      <a href={`/ring/${ring.id}`} title="Regresar" className="goBackLink">
        <GoBackArrow />
      </a>
    </Link>
    <div className="contentWrapper">
      <div className="content">
        <div className="ringInfo">
          <p className="ringNumber">{`Anillo ${ring.order}`}</p>
          <p className="ringName">{ring.title}</p>
        </div>
        <div className="phase">
          {icon}
          <p>{phase}</p>
        </div>
      </div>
      <span className="divider" />
    </div>
  </article>
);

export default PhaseHeader;