Payment Card Illustration

1'use client'
2 
3import { useReducedMotion } from 'motion/react'
4 
5import { cn } from '@/lib/utils'
6import { PaymentCard } from './_expense-workflow-parts'
7 
8type PaymentCardIllustrationProps = {
9  className?: string
10}
11 
12export function PaymentCardIllustration({ className }: PaymentCardIllustrationProps) {
13  const shouldReduceMotion = Boolean(useReducedMotion())
14 
15  return (
16    <div
17      role="img"
18      aria-label="Payment card"
19      className={cn('relative h-88 w-56 sm:h-96 sm:w-64', className)}
20    >
21      <PaymentCard isActive={true} shouldReduceMotion={shouldReduceMotion} />
22    </div>
23  )
24}
25 
26export default PaymentCardIllustration