import React from 'react'
import { Card, CardContent, Typography } from '@mui/material'
import Link from 'next/link'
import CustomAvatar, { CustomAvatarProps } from '@/@core/components/mui/Avatar'
import { ThemeColor } from '@/@core/types'

interface ReportCardProps {
  title: string
  avatarIcon: string
  href?: string
  target?: '_blank' | '_self' | '_parent' | '_top'
  avatarColor?: ThemeColor
  avatarVariant?: CustomAvatarProps['variant']
  avatarSkin?: CustomAvatarProps['skin']
  avatarSize?: number
}

const ReportCard = (props: ReportCardProps) => {
  const { title, avatarIcon, href, target = '_self', avatarColor, avatarVariant, avatarSkin, avatarSize } = props

  const CardComponent = (
    <Card
      className='transition-all duration-300 hover:shadow-lg hover:-translate-y-1 cursor-pointer'
      sx={{
        '&:hover': {
          '& .MuiCardContent-root': {
            transform: 'scale(1.02)'
          },
          '& .report-avatar': {
            transform: 'scale(1.1)'
          },
          '& .report-title': {
            color: 'primary.main'
          }
        }
      }}
    >
      <CardContent className='flex items-center gap-2 transition-transform duration-200'>
        <CustomAvatar
          variant={avatarVariant}
          skin={avatarSkin}
          color={avatarColor}
          size={avatarSize}
          className='report-avatar transition-transform duration-200'
        >
          <i className={avatarIcon} />
        </CustomAvatar>
        <div className='flex flex-col items-start gap-1'>
          <Typography variant='h6' className='report-title transition-colors duration-200'>
            {title}
          </Typography>
        </div>
      </CardContent>
    </Card>
  )

  // If href is provided, wrap with Link
  if (href) {
    // Check if it's an external link
    const isExternal = href.startsWith('http') || href.startsWith('mailto:') || href.startsWith('tel:')

    if (isExternal) {
      return (
        <a
          href={href}
          target={target}
          rel={target === '_blank' ? 'noopener noreferrer' : undefined}
          className='no-underline'
        >
          {CardComponent}
        </a>
      )
    }

    // Internal link using Next.js Link
    return (
      <Link href={href} className='no-underline'>
        {CardComponent}
      </Link>
    )
  }

  // No link, return card as is
  return CardComponent
}

export default ReportCard
