import { Box, Skeleton, Tab, Tabs } from '@mui/material'

export function PropertyDetailSkeleton() {
  return (
    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <Box sx={{ p: 2.5, borderBottom: '1px solid #e2e8f0' }}>
        <Box sx={{ display: 'flex', gap: 1, mb: 1 }}>
          <Skeleton variant="rounded" width={60} height={22} />
          <Skeleton variant="rounded" width={70} height={22} />
          <Skeleton variant="rounded" width={80} height={22} />
        </Box>
        <Skeleton variant="text" width="70%" height={28} />
        <Skeleton variant="text" width="50%" height={20} />
        <Box sx={{ display: 'flex', gap: 2, mt: 1 }}>
          <Skeleton variant="rounded" width={80} height={40} />
          <Skeleton variant="rounded" width={80} height={40} />
          <Skeleton variant="rounded" width={80} height={40} />
        </Box>
      </Box>
      <Tabs value={0} sx={{ borderBottom: '1px solid #e2e8f0', px: 2 }}>
        {['Übersicht', 'Hard Facts', 'Soft Factors'].map(label => (
          <Tab key={label} label={label} disabled sx={{ textTransform: 'none', fontSize: '0.8rem' }} />
        ))}
      </Tabs>
      <Box sx={{ p: 2.5, flex: 1 }}>
        {Array.from({ length: 6 }).map((_, i) => (
          <Box key={i} sx={{ mb: 2 }}>
            <Skeleton variant="text" width="30%" height={16} sx={{ mb: 0.5 }} />
            <Skeleton variant="text" width="60%" height={20} />
          </Box>
        ))}
      </Box>
    </Box>
  )
}
