'use client'

import { Card, CardContent, CardHeader, Typography, Grid2 as Grid } from '@mui/material'
import Link from 'next/link'
import { useLocale, useTranslations } from 'next-intl'

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

export default function DashboardHomePage() {
  const t = useTranslations('HOMEPAGE')
  const locale = useLocale()

  const paymentLinksPath = `/${locale}/payment-links`

  return (
    <div className='p-6 space-y-6'>
      <Card className='shadow-sm'>
        <CardContent className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
          <div>
            <Typography variant='h4' className='font-semibold'>
              {t('titlePrefix')} <span className='text-primary'>{t('brand')}</span>
            </Typography>
            <Typography variant='body2' color='text.secondary'>
              {t('subtitle')}
            </Typography>
          </div>
          <Button variant='contained' className='w-fit' component={Link} href={paymentLinksPath} withoutTranslation>
            {t('actions.goToPaymentLinks')}
          </Button>
        </CardContent>
      </Card>

      <Grid container spacing={4} alignItems={'stretch'}>
        <Grid size={{ xs: 12 }}>
          <Card className='shadow-sm'>
            <CardHeader title={t('quickActions.title')} subheader={t('quickActions.subtitle')} />
            <CardContent className='flex flex-col gap-3 sm:flex-row'>
              <Button variant='outlined' component={Link} href={paymentLinksPath} withoutTranslation>
                {t('actions.viewPaymentLinks')}
              </Button>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </div>
  )
}
