'use client'

import { Box, Card, Stack, Typography } from '@mui/material'
import type { Theme } from '@mui/material/styles'

import Button from '@/@core/components/mui/Button'

type PaymentLinksHeroProps = {
  theme: Theme
  isDark: boolean
  title: string
  subtitle: string
  createLabel: string
  onCreate: () => void
}

const PaymentLinksHero = ({ theme, isDark, title, subtitle, createLabel, onCreate }: PaymentLinksHeroProps) => {
  return (
    <Card
      sx={{
        background: isDark
          ? 'linear-gradient(135deg, #1a2b4f 0%, #255aa8 100%)'
          : 'linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)',
        color: isDark ? 'common.white' : 'text.primary'
      }}
    >
      <Box className='p-6 space-y-4'>
        <Stack direction={{ xs: 'column', md: 'row' }} justifyContent='space-between' spacing={3}>
          <Box>
            <Typography variant='h4' fontWeight={600} gutterBottom>
              {title}
            </Typography>
            <Typography sx={{ color: isDark ? 'rgba(255,255,255,0.75)' : 'text.secondary' }}>{subtitle}</Typography>
          </Box>
          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} alignItems={{ xs: 'stretch', sm: 'center' }}>
            <Button variant='contained' color='secondary' startIcon={<i className='tabler-plus' />} onClick={onCreate}>
              {createLabel}
            </Button>
          </Stack>
        </Stack>
      </Box>
    </Card>
  )
}

export default PaymentLinksHero
