'use client'

import React from 'react'
import { Card, CardContent, CardHeader, Typography, Box, Link } from '@mui/material'

interface LogEntry {
  id: string
  action: string
  timestamp: string
  user: string
}

const CashBankDetailTransactionLog: React.FC = () => {
  const logEntries: LogEntry[] = [
    {
      id: '1',
      action: 'Terakhir diubah oleh',
      timestamp: '08 Sep 2025 18:26',
      user: 'pada'
    }
  ]

  return (
    <Card>
      <CardHeader
        title={
          <Typography variant='h6' sx={{ fontWeight: 'bold' }}>
            Pantau log perubahan data
          </Typography>
        }
        sx={{ pb: 1 }}
      />
      <CardContent sx={{ mt: 5 }}>
        {logEntries.map(entry => (
          <Box key={entry.id} sx={{ mb: 2 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <i className='tabler-edit' style={{ fontSize: '16px', color: '#1976d2' }} />
              <Link
                href='#'
                underline='hover'
                color='primary'
                sx={{
                  textDecoration: 'none',
                  '&:hover': {
                    textDecoration: 'underline'
                  }
                }}
              >
                {entry.action} {entry.user} {entry.timestamp}
              </Link>
            </Box>
          </Box>
        ))}
      </CardContent>
    </Card>
  )
}

export default CashBankDetailTransactionLog