import React from 'react'
import { render } from '@testing-library/react'
import MetricCardFooter from '../metric-card-footer'

describe('MetricCardFooter', () => {
  it('should update footer text when props change', () => {
    const { rerender, getByText } = render(
      <MetricCardFooter value={1000} average={1200} unit="hours" />
    )

    rerender(<MetricCardFooter value={1000} average={1200} unit="minutes" />)
    expect(getByText('200 minutes')).toBeDefined()

    // re-render the same component with different props
    rerender(<MetricCardFooter value={1100} average={1200} unit="minutes" />)
    expect(getByText('100 minutes')).toBeDefined()
  })
})