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

export function MarketSignalSkeleton() {
  return (
    <Box
      sx={{
        p: 1.5,
        borderBottom: '1px solid #f1f5f9',
        display: 'flex',
        flexDirection: 'column',
        gap: 0.75,
      }}
    >
      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
        <Skeleton variant="rounded" width={80} height={20} />
        <Skeleton variant="rounded" width={60} height={20} />
      </Box>
      <Skeleton variant="text" sx={{ fontSize: '0.875rem' }} width="90%" />
      <Skeleton variant="text" sx={{ fontSize: '0.75rem' }} width="60%" />
      <Box sx={{ display: 'flex', gap: 1 }}>
        <Skeleton variant="rounded" width={90} height={20} />
        <Skeleton variant="rounded" width={70} height={20} />
      </Box>
    </Box>
  )
}
