'use client';

import Link from 'next/link';
import { GetCuestionario } from '@/types/cuestionario';
import React, { useState } from 'react';
import Image from 'next/image';
import Button from './button';
import { useRouter } from 'next/navigation';

interface Props {
  cuestionario: GetCuestionario;
  link: string;
  button_message?: string;
}

export default function FormularioCard({
  cuestionario,
  link,
  button_message,
}: Props) {
  const router = useRouter();
  const [verMas, setVerMas] = useState(false);
  const descripcion = cuestionario.descripcion;
  const limite = 100;

  const descripcionRecortada =
    descripcion.length > limite && !verMas
      ? `${descripcion.slice(0, limite)}...`
      : descripcion;

  return (
    <div className="card card-blog d-flex flex-column justify-content-between">
      <div>
        <div className="card-image scale-hover-1">
          <Link href={link}>
            <Image
              width={400}
              height={300}
              className="img"
              src="/feriasex.jpg"
              alt="Banner formulario"
            />
            <div className="card-caption">{cuestionario.nombre_form}</div>
          </Link>
          <div className="ripple-cont"></div>
        </div>

        <div className="table px-3 pt-3 mb-0">
          <h6 className="category text-info">
            {cuestionario.id_tipo_cuestionario === 1 ? 'Feria' : 'Evento'}
          </h6>
          <p className="card-description mb-0">
            {descripcionRecortada}
            {descripcion.length > limite && (
              <button
                onClick={() => setVerMas(!verMas)}
                className="btn btn-link btn-sm p-0 ms-1 align-baseline"
                style={{ fontSize: '0.875rem' }}
              >
                {verMas ? 'Ver menos' : 'Ver más'}
              </button>
            )}
          </p>
          {button_message && (
            <Button
              onClick={() => router.push(link)}
              outline
              className="mt-3 w-100 py-1 rounded"
              variant="azul"
            >
              {button_message}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}