'use client';

import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import styles from '@/components/charts/ChartAnalyticCard/ChartAnalyticCard.module.scss';

export type DashboardSectionDetailLinkProps = {
  href: string;
  slug: string;
  label?: string;
};

/** Link "Ver relatório" nos headers de seções analíticas do dashboard. */
export function DashboardSectionDetailLink({
  href,
  slug,
  label = 'Ver relatório',
}: DashboardSectionDetailLinkProps) {
  return (
    <Link
      href={href}
      className={styles.sectionDetailLink}
      data-testid={`dashboard-ver-detalhes-${slug}`}
    >
      {label}
      <ArrowRight size={ICON_SIZE_MD} aria-hidden />
    </Link>
  );
}