'use client'

import { Card, CardHeader, CardContent, Typography, Stack, Grid2 as Grid } from '@mui/material'
import { useTranslations } from 'next-intl'
import { useGetEntityProfile } from '@/@core/hooks/data/profile'
import BasicInfoCard from '@/@core/components/profile/BasicInfoCard'
import ContactInfoCard from '@/@core/components/profile/ContactInfoCard'
import LocationInfoCard from '@/@core/components/profile/LocationInfoCard'
import WorkingHoursCard from '@/@core/components/profile/WorkingHoursCard'
import StatusCard from '@/@core/components/profile/StatusCard'
import ImagesCard from '@/@core/components/profile/ImagesCard'

export default function EntityProfilePage() {
  const t = useTranslations('PROFILE')
  const { data } = useGetEntityProfile()
  const profile = data?.data

  if (!profile) {
    return (
      <div className='p-6'>
        <Typography>{t('loading')}</Typography>
      </div>
    )
  }

  return (
    <div className='p-6 space-y-6'>
      <Grid container spacing={3}>
        <Grid size={{ xs: 12, md: 6 }}>
          <BasicInfoCard />
        </Grid>
        <Grid size={{ xs: 12, md: 6 }}>
          <ContactInfoCard />
        </Grid>
        <Grid size={{ xs: 12, md: 6 }}>
          <LocationInfoCard />
        </Grid>

        {/* Working Hours */}
        <Grid size={{ xs: 12, md: 6 }}>
          <WorkingHoursCard />
        </Grid>

        {/* Images */}
        <Grid size={{ xs: 12, md: 6 }}>
          <ImagesCard />
        </Grid>

        <Grid size={{ xs: 12, md: 6 }}>
          <StatusCard />
        </Grid>
      </Grid>
    </div>
  )
}
