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

interface RingClickProps {
  ring: Ring;
  onMouseEnter?: (e: React.MouseEvent, ring: Ring) => void;
  onMouseLeave?: (e: React.MouseEvent) => void;
}

const RingClick: React.FC<RingClickProps> = ({
  ring,
  onMouseEnter,
  onMouseLeave,
}) => (
  <Link href={`/ring/${ring.id}`}>
    <a
      href={`/ring/${ring.id}`}
      title={ring.title}
      className={`ringClick ${ring.order === 1 ? 'one' : ''}${
        ring.order === 2 ? 'two' : ''
      }${ring.order === 3 ? 'three' : ''}${ring.order === 4 ? 'four' : ''}${
        ring.order === 5 ? 'five' : ''
      } `}
      onMouseEnter={(e): void => onMouseEnter(e, ring)}
      onMouseLeave={onMouseLeave}
    >
      <h2>
        <span>{`Anillo ${ring.order}`}</span>
        {ring.title}
      </h2>
      <span className="ring" />
    </a>
  </Link>
);

export default RingClick;